
#creature-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  #creature {
    font-size: .2vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150em;
    height: 150em;
    flex-wrap: wrap;
  }
  #creature div {
    transform-style: preserve-3d;
    position: relative;
    width: 4em;
    height: 4em;
    margin: 3em;
    border-radius: 2em;
    will-change: transform;
    mix-blend-mode: plus-lighter;
    /*mix-blend-mode: screen;*/
    /*mix-blend-mode: lighten;*/
    background: var(--red);
  }





  

  .btn-shine {
    /* --- Basic Button Styles --- */
    display: inline-block; /* Allows setting width/height/padding */
    padding: 12px 28px; /* Button size */
    font-size: 1rem; /* Text size */
    font-weight: bold;
    color: #ffffff; /* Text color - white works well on the gradient */
    text-align: center;
    text-decoration: none;
    border: none; /* No default border */
    border-radius: 50px; /* Rounded corners */
    cursor: pointer;
  
    /* --- Theme Gradient Background --- */
    background: linear-gradient(315deg, #ffbc00, #ff7b00);
    background-size: 200% auto; /* Needed for potential hover animation later */
  
    /* --- Positioning & Overflow for Shine --- */
    position: relative; /* Crucial for positioning the ::before element */
    overflow: hidden; /* Hides the shine element when it's outside */
    z-index: 1; /* Ensure button content is above the shine */
  
    /* --- Smooth Transitions --- */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth transition for hover effects */
  }
  
  /* --- The Shine Element (Pseudo-element) --- */
  .btn-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start off-screen to the left */
    width: 75%; /* Width of the shine beam */
    height: 100%;
    z-index: -1; /* Place behind button text but above background */
  
    /* --- Shine Gradient --- */
    /* A subtle white/light yellow gradient works well for shine */
    background: linear-gradient(
      100deg, /* Angle of the shine */
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 230, 150, 0.4) 40%, /* Light yellow tint from theme */
      rgba(255, 255, 255, 0.6) 50%, /* Peak shine (whiter) */
      rgba(255, 230, 150, 0.4) 60%, /* Light yellow tint */
      rgba(255, 255, 255, 0) 100%
    );
  
    /* --- Skew for Diagonal Effect --- */
    transform: skewX(-25deg);
  
    /* --- Shine Animation Transition --- */
    transition: left 0.8s ease-in-out; /* Speed of the shine sweep */
  }
  
  /* --- Trigger Shine on Hover --- */
  .btn-shine:hover::before {
    left: 125%; /* Move shine across and off-screen to the right */
  }
  
  /* --- Optional: Add extra hover effects --- */
  .btn-shine:hover {
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(255, 188, 0, 0.4); /* Glow using theme yellow */
    transform: translateY(-2px); /* Slight lift effect */
    /* You could also slightly change the background gradient on hover if desired */
    /* background-position: right center; */ /* Example: Shifts the gradient */
  }
  
  /* --- Optional: Active state (when clicked) --- */
  .btn-shine:active {
    transform: translateY(0px); /* Return to original position */
    box-shadow: 0 4px 10px rgba(255, 188, 0, 0.3); /* Smaller shadow */
  }
  
  /* --- Optional: Focus state for accessibility --- */
  .btn-shine:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 3px rgba(255, 188, 0, 0.5); /* Custom focus ring using theme color */
  }


  




  /* =======================================
    Card Animated Gradient Border
   ======================================= */

.card-gradient-border {
  position: relative;
  z-index: 1;
  padding: 2px; /* Space for the border to appear *inside* */
  background: transparent; /* Make card background transparent */
  border-radius: 1rem; /* Match your card's border-radius */
  overflow: hidden; /* Ensure inner content also gets rounded corners */
  /* Keep existing transitions */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card-gradient-border::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(315deg, #ffbc00, #ff7b00, #ffbc00); /* Theme gradient, repeated for smooth loop */
  background-size: 200% 200%; /* Make background larger than element */
  z-index: -1; /* Behind the inner content */
  border-radius: inherit; /* Inherit border-radius */
  animation: gradient-spin 3s linear infinite; /* Continuous spin animation */
  opacity: 0; /* Hidden by default */
  transition: opacity 0.4s ease-in-out; /* Fade in on hover */
}

/* The actual card content container */
.card-gradient-border .card-inner-content {
   background: #1E1E1E; /* Use your bg-dark-item color or var(--panel-bg-color) */
   /* Or slightly darker: background: rgba(30, 30, 30, 1); */
   color: white; /* Ensure text color is set */
   padding: calc(1.5rem - 2px); /* Adjust padding from original card, minus the border space */
   border-radius: calc(1rem - 2px); /* Slightly smaller radius */
   height: 100%; /* Ensure it fills the parent */
   display: flex; /* To help center content if needed */
   flex-direction: column;
   align-items: center;
   justify-content: center; /* Or remove if content shouldn't be centered vertically */
}


@keyframes gradient-spin {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Show and potentially speed up animation on hover */
.card-gradient-border:hover::before {
  opacity: 1;
  /* Optional: speed up animation on hover */
  /* animation-duration: 1.5s; */
}

/* Compatibility with existing hover effect */
.card-gradient-border.hover-effect:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 188, 0, 0.3); /* Shadow with theme color */
}

/* Make sure card content (icon, text) is above pseudo elements */
.card-gradient-border .card-inner-content > * {
    position: relative;
    z-index: 2;
}















.image-wrapper {
  display: flex;
  align-items: center;
  text-align: center;
  line-height: 1.6;
}
.image-wrapper img {
  height: auto;
  max-width: 100%;
}

.shine {
  position: relative;
  overflow: hidden;
}
.shine::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  content: "";
  display: block;
  height: 100%;
  left: -75%;
  position: absolute;
  top: 0;
  transform: skewX(-25deg);
  width: 50%;
  z-index: 2;
}
.shine:hover::before, .shine:focus::before {
  -webkit-animation: shine 0.85s;
          animation: shine 0.85s;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}



/* Service Card Image Styling */
.card .image-wrapper {
  height: 200px; /* <<--- YAHAN SE HEIGHT ADJUST KAREIN */
  overflow: hidden; /* Extra content (image overflow) ko hide karega */
  position: relative; /* Agar 'shine' effect ko positioning chahiye */
}

.card .image-wrapper img {
  display: block; /* Ensures image behaves like a block */
  width: 100%; /* Image ko wrapper ki poori width dega */
  height: 100%; /* Image ko wrapper ki poori height lene ko kahega */
  object-fit: cover; /* Sabse important: Image ko scale/crop karke poora area cover karega bina aspect ratio bigade */
  object-position: center center; /* Cropping ko center se karega (optional) */
}