.shine-button {
  background: #000000; /* Set the background color of the button */
  color: #FFFFFF; /* Set the text color of the button */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow effect to the button */
}
/* Add a shine effect to the button when it is hovered over */
.shine-button:hover {
  box-shadow: 0 4px 6px rgba(255, 255, 255, 0.3);
  transform: translateY(-2px); /* Add a slight upward movement effect when the button is hovered over */
}
@keyframes shine {
  /* Define the keyframes of the animation */
  0% {
    background-position: -250px;
  }
  100% {
    background-position: 250px;
  }
}
.shine-button {
  /* Add the animation to the button */
  animation: shine 1s linear infinite;
}

.shine-button {
  /* Add the gradient background image to the button */
  background-image: 
  linear-gradient(to right, rgba(255, 0, 0, 0.8), 
  rgba(255, 0, 0, 0.8) 50%, rgba(255, 0, 0, 0.2) 50%, rgba(255, 0, 0, 0.2));
  background-size: 250px 100%;
  background-repeat: no-repeat;
}
/* Grayed-out overlay */
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        /* Semi-transparent black */
        z-index: 10;
    }

    /* Disable pointer events for grayed-out content */
    .overlay-active .other-content {
        pointer-events: none;
        opacity: 0.5;
        /* Optional: Reduce opacity for disabled content */
    }

    /* Content styling */
    .content {
        position: relative;
        z-index: 20;
        /* Ensure buttons are above the overlay */
    }
.custom-link {
    line-height: 0.2px; /* Adjust the value as needed */
}
.row .effect {
                 box-shadow: 0 0 0px 4px rgba(40, 167, 69, 0.47);
             }

             .effect:hover {
                 box-shadow: 0 0 10px 4px rgba(40, 167, 69, 0.47);
             }

             .row .load-img {
                 cursor: pointer;
                 display: block;
                 width: 100%;
             }

             .row h2.load-header {
                 background: rgba(51, 51, 51, 0.5);
                 letter-spacing: 2px;
                 font-weight: 600;
                 font-size: 12px;
                 cursor: pointer;
             }

             /*     ===== Effect 8 =====*/
             .effect {
                 position: relative;
                 overflow: hidden;
             }

             .effect img {
                 transition: all 1s;
             }

             .effect:hover img {
                 transform: scale(1.3);
             }

             /* Button */
             .effect .btn {
                 border: none;
                 outline: none;
                 padding: 2px 2px;
                 background-color: rgba(40, 167, 69, 0.8);
                 cursor: pointer;
                 color: white;
                 font-weight: 800;
                 font-size: 14px;
                 margin-top: 30px;
                 margin-right: 2px;
                 position: absolute;
                 top: 55%;
                 left: 30%;
                 transform: translateX(800px);
                 transition: transform 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             }

             .effect .btn:hover {
                 background: rgba(137, 218, 89, 1);
             }

             /* Text */
             .effect h2 {
                 position: absolute;
                 right: 0px;
                 top: 15%;
                 text-align: right;
                 transform: translateX(700px) scale(0.1);
                 transition: transform 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             }

             .effect:hover h2 {
                 transform: translateX(0px) scale(1);
             }

             .effect:hover .btn {
                 left: 30%;
                 transform: translateX(-50%);
                 animation: btnWidth 1.2s forwards;
             }

             @keyframes btnWidth {
                 0% {
                     padding: 2px 2px;
                     opacity: .2;
                 }

                 50% {
                     padding: 2px 100%;
                 }

                 100% {
                     padding: 2px 2px;
                     opacity: 1;
                 }
             }

             .category-filter-button.active {
                 background-color: #005177;
             }


             .grid-container {
                 display: grid;
                 grid-template-columns: auto auto;
                 /* 3 equal-width columns */
                 gap: 1px;
                 /* Space between columns */
             }