/*-----------------------------------------------------------------------------------
	I want that voice
	Author: Robert Eberl
	Version: 1.0
	style_custom.css
-----------------------------------------------------------------------------------*/


/* Custom button styles */


.btn2-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Consistent spacing between buttons */
    justify-content: center; /* Center the buttons horizontally */
    align-items: center; /* Center the buttons vertically (if needed) */
    margin: 0 auto; /* Center the container itself */
  }
  
  
  .btn2 {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-decoration: none;
    gap: 10px; /* Consistent spacing between buttons */
    width: 236px; /* Set a fixed width for all buttons */
  
  
  
  }
  
  /* Icon styles */
  .btn2 i {
    display: block;
    margin: 0 auto;
    margin-bottom: 5px; /* Adjust this value to control the space between the icon and text */
  }
  
  
  .btn2-link {
    color: #007bff;
    background-color: transparent;
    border-color: transparent;
  }
  
  
  .btn2-link:hover {
    color: #0056b3;
    text-decoration: underline;
    background-color: transparent;
    border-color: transparent;
  }
  
  
  /* Hover state */
  .btn2:hover {
    text-decoration: none;
  }
  
  
  
  
  
  
  
  
  
  
  
  .bg-color-red {
      background-color: #e21010;  /* Richer Red */
      color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-red:hover {
      background-color: #b50d0d;  /* Darker Rich Red */
      color: #fff; /* Added to prevent text color change */
  
  }
  
  
  
  
  .bg-color-light-red {
    background-color: #f56262; /* Lighter Red */
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-light-red:hover {
    background-color: #d03d3d; /* Darker Hover */
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-dark-red {
    background-color: #a90b0b; /* Darker Red */
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-dark-red:hover {
    background-color: #7a0707; /* Even Darker Hover */
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-lime {
    background-color: #dfe563;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-lime:hover {
    background-color: #b9bf4a;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-dark-orange {
    background-color: #ff5722;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-dark-orange:hover {
    background-color: #e64a19;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  
  .bg-color-light-pink {
      background-color: #F969BB;
      color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-light-pink:hover {
      background-color: #D558A4;  /* Darker version of light pink */
      color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-pink {
    background-color: #e91e63;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-pink:hover {
    background-color: #c2185b;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-cyan {
    background-color: #00bcd4;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-cyan:hover {
    background-color: #0097a7;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-sand {
    background-color: #f5f5dc;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-sand:hover {
    background-color: #e0e0c7;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-brown {
    background-color: #795548;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-brown:hover {
    background-color: #5d4037;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-purple {
    background-color: #9c27b0;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-purple:hover {
    background-color: #7b1fa2;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-aqua {
    background-color: #00ffff;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-aqua:hover {
    background-color: #00e5e5;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-khaki {
    background-color: #f0e68c;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-khaki:hover {
    background-color: #d9cd63;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-blue-grey {
    background-color: #607d8b;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-blue-grey:hover {
    background-color: #455a64;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-dark-purple {
    background-color: #673ab7;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-dark-purple:hover {
    background-color: #512da8;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-teal {
    background-color: #009688;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-teal:hover {
    background-color: #00796b;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-yellow {
    background-color: #ffeb3b;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-yellow:hover {
    background-color: #fdd835;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-light-grey {
    background-color: #d3d3d3;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-light-grey:hover {
    background-color: #bdbdbd;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-indigo {
    background-color: #3f51b5;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-indigo:hover {
    background-color: #303f9f;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-green {
    background-color: #28a745;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-green:hover {
    background-color: #218838;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-amber {
    background-color: #ffc107;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-amber:hover {
    background-color: #ffa000;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-grey {
    background-color: #9e9e9e;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-grey:hover {
    background-color: #757575;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-blue {
    background-color: #007bff;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-blue:hover {
    background-color: #0056b3;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  
  .bg-color-light-blue {
    background-color: #6bbcff; /* Lighter Blue */
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-light-blue:hover {
    background-color: #4a9eff; /* Darker Blue on Hover */
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-dark-blue {
    background-color: #003daa; /* Darker Blue */
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-dark-blue:hover {
    background-color: #00206e; /* Even Darker Blue on Hover */
    color: #fff; /* Added to prevent text color change */
  
  }
  
  
  
  
  
  
  .bg-color-light-green {
    background-color: #ace02d;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-light-green:hover {
    background-color: #8ab224;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-orange {
    background-color: #ff9800;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-orange:hover {
    background-color: #fb8c00;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-dark-grey {
    background-color: #616161;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-dark-grey:hover {
    background-color: #424242;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  
  
  .bg-color-light-teal {
    background-color: #38d0bc;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-light-teal:hover {
    background-color: #17aaba;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  
  
  
  
  .bg-color-gold {
    background-color: #d8c099;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-gold:hover {
    background-color: #9b896f;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  
  
  .bg-color-light-black {
    background-color: #1a1a1a;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-light-black:hover {
    background-color: #000000;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  
  
  .bg-color-white {
    background-color: #e5e5e5;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-white:hover {
    background-color: #CCCCCC;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  
  
  
  
  .bg-color-sky {
    background-color: #12bbff;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-sky:hover {
    background-color: #16a9d6;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  
  .bg-color-teal2 {
    background-color: #1fdede;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-teal2:hover {
    background-color: #22c6c1;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  
  .bg-color-mint {
    background-color: #04c987;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  .bg-color-mint:hover {
    background-color: #07ad71;
    color: #fff; /* Added to prevent text color change */
  
  }
  
  
  
  /* Gradient combinations */
  
  /* Gradient Button Styles */
  .bg-color-red-gradient {
    background: linear-gradient(45deg, #e21010, #b50d0d); /* Gradient from Richer Red to Darker Rich Red */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-red-gradient:hover {
    background: linear-gradient(45deg, #b50d0d, #870a0a); /* Gradient from Darker Rich Red to Even Darker Red */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-light-red-gradient {
    background: linear-gradient(45deg, #f56262, #d03d3d); /* Gradient from Lighter Red to Darker Hover */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-light-red-gradient:hover {
    background: linear-gradient(45deg, #d03d3d, #a02727); /* Gradient from Darker Hover to Even Darker Hover */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-dark-red-gradient {
    background: linear-gradient(45deg, #a90b0b, #7a0707); /* Gradient from Darker Red to Even Darker Hover */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-dark-red-gradient:hover {
    background: linear-gradient(45deg, #7a0707, #510606); /* Gradient from Even Darker Hover to Almost Black */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-lime-gradient {
    background: linear-gradient(45deg, #dfe563, #b9bf4a); /* Gradient from Lime to Darker Lime */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-lime-gradient:hover {
    background: linear-gradient(45deg, #b9bf4a, #8e9236); /* Gradient from Darker Lime to Even Darker Lime */
    color: #fff; /* Added to prevent text color change */
  }
  
  /* Gradient Button Styles */
  .bg-color-dark-orange-gradient {
    background: linear-gradient(45deg, #ff5722, #e64a19); /* Gradient from Dark Orange to Darker Orange */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-dark-orange-gradient:hover {
    background: linear-gradient(45deg, #e64a19, #d03d3d); /* Gradient from Darker Orange to Even Darker Orange */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-light-pink-gradient {
    background: linear-gradient(45deg, #f969bb, #d558a4); /* Gradient from Light Pink to Darker Pink */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-light-pink-gradient:hover {
    background: linear-gradient(45deg, #d558a4, #9c27b0); /* Gradient from Darker Pink to Even Darker Pink */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-pink-gradient {
    background: linear-gradient(45deg, #e91e63, #c2185b); /* Gradient from Pink to Darker Pink */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-pink-gradient:hover {
    background: linear-gradient(45deg, #c2185b, #9d174d); /* Gradient from Darker Pink to Even Darker Pink */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-cyan-gradient {
    background: linear-gradient(45deg, #00bcd4, #0097a7); /* Gradient from Cyan to Darker Cyan */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-cyan-gradient:hover {
    background: linear-gradient(45deg, #0097a7, #00796b); /* Gradient from Darker Cyan to Even Darker Cyan */
    color: #fff; /* Added to prevent text color change */
  }
  
  /* Gradient Button Styles */
  .bg-color-sand-gradient {
    background: linear-gradient(45deg, #f5f5dc, #e0e0c7); /* Gradient from Sand to Darker Sand */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-sand-gradient:hover {
    background: linear-gradient(45deg, #e0e0c7, #bdbdbd); /* Gradient from Darker Sand to Even Darker Sand */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-brown-gradient {
    background: linear-gradient(45deg, #795548, #5d4037); /* Gradient from Brown to Darker Brown */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-brown-gradient:hover {
    background: linear-gradient(45deg, #5d4037, #3e2723); /* Gradient from Darker Brown to Even Darker Brown */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-purple-gradient {
    background: linear-gradient(45deg, #9c27b0, #7b1fa2); /* Gradient from Purple to Darker Purple */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-purple-gradient:hover {
    background: linear-gradient(45deg, #7b1fa2, #4a148c); /* Gradient from Darker Purple to Even Darker Purple */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-aqua-gradient {
    background: linear-gradient(45deg, #00ffff, #00e5e5); /* Gradient from Aqua to Darker Aqua */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-aqua-gradient:hover {
    background: linear-gradient(45deg, #00e5e5, #009688); /* Gradient from Darker Aqua to Even Darker Aqua */
    color: #fff; /* Added to prevent text color change */
  }
  
  /* Gradient Button Styles */
  .bg-color-khaki-gradient {
    background: linear-gradient(45deg, #f0e68c, #d9cd63); /* Gradient from Khaki to Darker Khaki */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-khaki-gradient:hover {
    background: linear-gradient(45deg, #d9cd63, #b3a737); /* Gradient from Darker Khaki to Even Darker Khaki */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-blue-grey-gradient {
    background: linear-gradient(45deg, #607d8b, #455a64); /* Gradient from Blue Grey to Darker Blue Grey */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-blue-grey-gradient:hover {
    background: linear-gradient(45deg, #455a64, #263238); /* Gradient from Darker Blue Grey to Even Darker Blue Grey */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-dark-purple-gradient {
    background: linear-gradient(45deg, #673ab7, #512da8); /* Gradient from Dark Purple to Darker Dark Purple */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-dark-purple-gradient:hover {
    background: linear-gradient(45deg, #512da8, #311b92); /* Gradient from Darker Dark Purple to Even Darker Dark Purple */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-teal-gradient {
    background: linear-gradient(45deg, #009688, #00796b); /* Gradient from Teal to Darker Teal */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-teal-gradient:hover {
    background: linear-gradient(45deg, #00796b, #004d40); /* Gradient from Darker Teal to Even Darker Teal */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-yellow-gradient {
    background: linear-gradient(45deg, #ffeb3b, #fdd835); /* Gradient from Yellow to Darker Yellow */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-yellow-gradient:hover {
    background: linear-gradient(45deg, #fdd835, #fbc02d); /* Gradient from Darker Yellow to Even Darker Yellow */
    color: #fff; /* Added to prevent text color change */
  }
  
  /* Gradient Button Styles */
  .bg-color-light-grey-gradient {
    background: linear-gradient(45deg, #d3d3d3, #bdbdbd); /* Gradient from Light Grey to Darker Light Grey */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-light-grey-gradient:hover {
    background: linear-gradient(45deg, #bdbdbd, #8c8c8c); /* Gradient from Darker Light Grey to Even Darker Light Grey */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-indigo-gradient {
    background: linear-gradient(45deg, #3f51b5, #303f9f); /* Gradient from Indigo to Darker Indigo */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-indigo-gradient:hover {
    background: linear-gradient(45deg, #303f9f, #1a237e); /* Gradient from Darker Indigo to Even Darker Indigo */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-green-gradient {
    background: linear-gradient(45deg, #28a745, #218838); /* Gradient from Green to Darker Green */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-green-gradient:hover {
    background: linear-gradient(45deg, #218838, #155724); /* Gradient from Darker Green to Even Darker Green */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-amber-gradient {
    background: linear-gradient(45deg, #ffc107, #ffa000); /* Gradient from Amber to Darker Amber */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-amber-gradient:hover {
    background: linear-gradient(45deg, #ffa000, #ff8f00); /* Gradient from Darker Amber to Even Darker Amber */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-grey-gradient {
    background: linear-gradient(45deg, #9e9e9e, #757575); /* Gradient from Grey to Darker Grey */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-grey-gradient:hover {
    background: linear-gradient(45deg, #757575, #4c4c4c); /* Gradient from Darker Grey to Even Darker Grey */
    color: #fff; /* Added to prevent text color change */
  }
  
  /* Gradient Button Styles */
  .bg-color-blue-gradient {
    background: linear-gradient(45deg, #007bff, #0056b3); /* Gradient from Blue to Darker Blue */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-blue-gradient:hover {
    background: linear-gradient(45deg, #0056b3, #003d99); /* Gradient from Darker Blue to Even Darker Blue */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-light-blue-gradient {
    background: linear-gradient(45deg, #6bbcff, #4a9eff); /* Gradient from Light Blue to Darker Blue */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-light-blue-gradient:hover {
    background: linear-gradient(45deg, #4a9eff, #2976d1); /* Gradient from Darker Blue to Even Darker Blue */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-dark-blue-gradient {
    background: linear-gradient(45deg, #003daa, #00206e); /* Gradient from Dark Blue to Even Darker Blue */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-dark-blue-gradient:hover {
    background: linear-gradient(45deg, #00206e, #001144); /* Gradient from Even Darker Blue to Even Darker Blue */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-light-green-gradient {
    background: linear-gradient(45deg, #ace02d, #8ab224); /* Gradient from Light Green to Darker Green */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-light-green-gradient:hover {
    background: linear-gradient(45deg, #8ab224, #5d8b17); /* Gradient from Darker Green to Even Darker Green */
    color: #fff; /* Added to prevent text color change */
  }
  
  /* Gradient Button Styles */
  .bg-color-orange-gradient {
    background: linear-gradient(45deg, #ff9800, #fb8c00); /* Gradient from Orange to Darker Orange */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-orange-gradient:hover {
    background: linear-gradient(45deg, #fb8c00, #f57c00); /* Gradient from Darker Orange to Even Darker Orange */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-dark-grey-gradient {
    background: linear-gradient(45deg, #616161, #424242); /* Gradient from Dark Grey to Even Darker Grey */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-dark-grey-gradient:hover {
    background: linear-gradient(45deg, #424242, #212121); /* Gradient from Even Darker Grey to Black */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-light-teal-gradient {
    background: linear-gradient(45deg, #38d0bc, #17aaba); /* Gradient from Light Teal to Darker Teal */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-light-teal-gradient:hover {
    background: linear-gradient(45deg, #17aaba, #008e89); /* Gradient from Darker Teal to Even Darker Teal */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-gold-gradient {
    background: linear-gradient(45deg, #d8c099, #9b896f); /* Gradient from Gold to Darker Gold */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-gold-gradient:hover {
    background: linear-gradient(45deg, #9b896f, #6a5745); /* Gradient from Darker Gold to Even Darker Gold */
    color: #fff; /* Added to prevent text color change */
  }
  
  /* Gradient Button Styles */
  .bg-color-light-black-gradient {
    background: linear-gradient(45deg, #1a1a1a, #000000); /* Gradient from Light Black to Black */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-light-black-gradient:hover {
    background: linear-gradient(45deg, #000000, #000000); /* Gradient from Black to Black (same color) */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-white-gradient {
    background: linear-gradient(45deg, #e5e5e5, #CCCCCC); /* Gradient from White to Light Grey */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-white-gradient:hover {
    background: linear-gradient(45deg, #CCCCCC, #CCCCCC); /* Gradient from Light Grey to Light Grey (same color) */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-sky-gradient {
    background: linear-gradient(45deg, #12bbff, #16a9d6); /* Gradient from Sky Blue to Teal */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-sky-gradient:hover {
    background: linear-gradient(45deg, #16a9d6, #0e7dab); /* Gradient from Teal to Darker Teal */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-teal2-gradient {
    background: linear-gradient(45deg, #1fdede, #22c6c1); /* Gradient from Teal to Lighter Teal */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-teal2-gradient:hover {
    background: linear-gradient(45deg, #22c6c1, #1fa68e); /* Gradient from Lighter Teal to Darker Teal */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-mint-gradient {
    background: linear-gradient(45deg, #04c987, #07ad71); /* Gradient from Mint to Lighter Mint */
    color: #fff; /* Added to prevent text color change */
  }
  
  .bg-color-mint-gradient:hover {
    background: linear-gradient(45deg, #07ad71, #05955f); /* Gradient from Lighter Mint to Darker Mint */
    color: #fff; /* Added to prevent text color change */
  }
  
  
  
  
  
  
  
  /* EXOTIC Gradient combinations */
  .bg-color-gradient1 {
    background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 100%);
    color: #fff; /* Ensure text remains white */
    border: none; /* Remove any border/frame */
  }
  
  .bg-color-gradient1:hover {
    background: linear-gradient(45deg, #f8a0b1 0%, #f4a2b0 100%);
    color: #fff; /* Prevent text color change */
  }
  
  .bg-color-gradient2 {
    background: linear-gradient(45deg, #a1c4fd 0%, #c2e9fb 100%);
    color: #fff; /* Ensure text remains white */
    border: none; /* Remove any border/frame */
  }
  
  .bg-color-gradient2:hover {
    background: linear-gradient(45deg, #8ebefa 0%, #a1c4fd 100%);
    color: #fff; /* Prevent text color change */
  }
  
  .bg-color-gradient3 {
    background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
    color: #fff; /* Ensure text remains white */
    border: none; /* Remove any border/frame */
  }
  
  .bg-color-gradient3:hover {
    background: linear-gradient(45deg, #ec74a3 0%, #f06292 100%);
    color: #fff; /* Prevent text color change */
  }
  
  .bg-color-gradient4 {
    background: linear-gradient(45deg, #84fab0 0%, #8fd3f4 100%);
    color: #fff; /* Ensure text remains white */
    border: none; /* Remove any border/frame */
  }
  
  .bg-color-gradient4:hover {
    background: linear-gradient(45deg, #6ee7b7 0%, #9ae1f9 100%);
    color: #fff; /* Prevent text color change */
  }
  
  .bg-color-gradient5 {
    background: linear-gradient(45deg, #cfd9df 0%, #e2ebf0 100%);
    color: #fff; /* Ensure text remains black */
    border: none; /* Remove any border/frame */
  }
  
  .bg-color-gradient5:hover {
    background: linear-gradient(45deg, #bcc9d4 0%, #d8e2e7 100%);
    color: #fff; /* Prevent text color change */
  }
  
  .bg-color-gradient6 {
    background: linear-gradient(45deg, #fdcbf1 0%, #e6dee9 100%);
    color: #fff; /* Ensure text remains black */
    border: none; /* Remove any border/frame */
  }
  
  .bg-color-gradient6:hover {
    background: linear-gradient(45deg, #f6b1e6 0%, #dddfe4 100%);
    color: #000; /* Prevent text color change */
  }
  
  .bg-color-gradient7 {
    background: linear-gradient(45deg, #a18cd1 0%, #fbc2eb 100%);
    color: #fff; /* Ensure text remains white */
    border: none; /* Remove any border/frame */
  }
  
  .bg-color-gradient7:hover {
    background: linear-gradient(45deg, #9168be 0%, #e8a9e8 100%);
    color: #fff; /* Prevent text color change */
  }
  
  .bg-color-gradient8 {
    background: linear-gradient(45deg, #fddb92 0%, #d1fdff 100%);
    color: #fff; /* Ensure text remains black */
    border: none; /* Remove any border/frame */
  }
  
  .bg-color-gradient8:hover {
    background: linear-gradient(45deg, #fcd781 0%, #bdf9ff 100%);
    color: #fff; /* Prevent text color change */
  }
  
  .bg-color-gradient9 {
    background: linear-gradient(45deg, #fbc2eb 0%, #a6c1ee 100%);
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient9:hover {
    background: linear-gradient(45deg, #e8a9e8 0%, #92b0e4 100%);
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient10 {
    background: linear-gradient(45deg, #ffecd2 0%, #fcb69f 100%);
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient10:hover {
    background: linear-gradient(45deg, #ffe4bf 0%, #f3a786 100%);
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient11 {
    background: linear-gradient(45deg, #c1dfc4 0%, #deecdd 100%);
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient11:hover {
    background: linear-gradient(45deg, #a4c7a3 0%, #cce0cc 100%);
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient12 {
    background: linear-gradient(45deg, #f3e7e9 0%, #e3eeff 100%);
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient12:hover {
    background: linear-gradient(45deg, #d4ccd2 0%, #c5d2eb 100%);
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient13 {
    background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%);
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient13:hover {
    background: linear-gradient(45deg, #f87a8b 0%, #fcb3e5 100%);
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient14 {
    background: linear-gradient(45deg, #f6d365 0%, #fda085 100%);
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient14:hover {
    background: linear-gradient(45deg, #f1c04c 0%, #f79472 100%);
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient15 {
    background: linear-gradient(45deg, #fbc7d4 0%, #9796f0 100%);
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient15:hover {
    background: linear-gradient(45deg, #f69fa8 0%, #7d7ae0 100%);
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient16 {
    background: linear-gradient(45deg, #e0c3fc 0%, #8ec5fc 100%);
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient16:hover {
    background: linear-gradient(45deg, #c9a6f4 0%, #76b1fc 100%);
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient17 {
    background: linear-gradient(45deg, #fccb90 0%, #d57eeb 100%);
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient17:hover {
    background: linear-gradient(45deg, #fbb36d 0%, #c66ad4 100%);
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient18 {
    background: linear-gradient(45deg, #8a6e45 0%, #9b8767 100%); /* Darker tones */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient18:hover {
    background: linear-gradient(45deg, #6f5230 0%, #826a50 100%); /* Darker hover tones */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  
  .bg-color-gradient19 {
    background: linear-gradient(45deg, #d299c2 0%, #fef9d7 100%);
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient19:hover {
    background: linear-gradient(45deg, #b874a8 0%, #fde7a1 100%);
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient20 {
    background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient20:hover {
    background: linear-gradient(45deg, #329bf6 0%, #00d3f4 100%);
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient21 {
    background: linear-gradient(45deg, #e21010, #b50d0d); /* Red */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient21:hover {
    background: linear-gradient(45deg, #b50d0d, #7a0707); /* Darker Red */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient22 {
    background: linear-gradient(45deg, #f56262, #d03d3d); /* Light Red */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient22:hover {
    background: linear-gradient(45deg, #d03d3d, #a90b0b); /* Dark Red */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient23 {
    background: linear-gradient(45deg, #6be09a 0%, #7bb2d3 100%); /* Darker Lime Gradient */
    color: #fff; /* Ensure text remains white */
    border: none; /* Remove any border/frame */
  }
  
  .bg-color-gradient23:hover {
    background: linear-gradient(45deg, #54c47e 0%, #5d99bf 100%); /* Darker Hover Gradient */
    color: #fff; /* Prevent text color change */
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient24 {
    background: linear-gradient(45deg, #ff5722, #d84315); /* Stronger Dark Orange */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient24:hover {
    background: linear-gradient(45deg, #e64a19, #b71c1c); /* Darker Orange */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient25 {
    background: linear-gradient(45deg, #F969BB, #C2185B); /* Stronger Light Pink */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient25:hover {
    background: linear-gradient(45deg, #C2185B, #880E4F); /* Darker Pink */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient26 {
    background: linear-gradient(45deg, #e91e63, #c2185b); /* Pink */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient26:hover {
    background: linear-gradient(45deg, #c2185b, #7b1fa2); /* Darker Pink */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient27 {
    background: linear-gradient(45deg, #00bcd4, #00796b); /* Stronger Cyan */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient27:hover {
    background: linear-gradient(45deg, #00796b, #004d40); /* Darker Cyan */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient28 {
    background: linear-gradient(45deg, #f5f5dc, #c0c0a0); /* Stronger Sand */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient28:hover {
    background: linear-gradient(45deg, #c0c0a0, #8c8c6e); /* Darker Sand */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  .bg-color-gradient29 {
    background: linear-gradient(45deg, #795548, #5d4037); /* Brown */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient29:hover {
    background: linear-gradient(45deg, #5d4037, #3e2723); /* Darker Brown */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient30 {
    background: linear-gradient(45deg, #9c27b0, #7b1fa2); /* Purple */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient30:hover {
    background: linear-gradient(45deg, #7b1fa2, #512da8); /* Darker Purple */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient31 {
    background: linear-gradient(45deg, #00ffff, #00b3b3); /* Stronger Aqua */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient31:hover {
    background: linear-gradient(45deg, #00b3b3, #00796b); /* Darker Aqua */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient32 {
    background: linear-gradient(45deg, #f0e68c, #d9cd63); /* Khaki */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient32:hover {
    background: linear-gradient(45deg, #d9cd63, #bdbdbd); /* Darker Khaki */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient33 {
    background: linear-gradient(45deg, #607d8b, #455a64); /* Blue Grey */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient33:hover {
    background: linear-gradient(45deg, #455a64, #37474f); /* Darker Blue Grey */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient34 {
    background: linear-gradient(45deg, #673ab7, #512da8); /* Dark Purple */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient34:hover {
    background: linear-gradient(45deg, #512da8, #311b92); /* Darker Purple */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient35 {
    background: linear-gradient(45deg, #009688, #00796b); /* Teal */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient35:hover {
    background: linear-gradient(45deg, #00796b, #004d40); /* Darker Teal */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient36 {
    background: linear-gradient(45deg, #ffeb3b, #fdd835); /* Yellow */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient36:hover {
    background: linear-gradient(45deg, #fdd835, #fbc02d); /* Darker Yellow */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient37 {
    background: linear-gradient(45deg, #d3d3d3, #a9a9a9); /* Stronger Light Grey */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient37:hover {
    background: linear-gradient(45deg, #bdbdbd, #808080); /* Stronger Hover Effect */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient38 {
    background: linear-gradient(45deg, #3f51b5, #1a237e); /* Indigo to Dark Indigo */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient38:hover {
    background: linear-gradient(45deg, #1a237e, #000051); /* Dark Indigo to Almost Black */
    color: #fff;
    border: none;
  }
  .bg-color-gradient39 {
    background: linear-gradient(45deg, #28a745, #1e7e34); /* Stronger Green */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient39:hover {
    background: linear-gradient(45deg, #1e7e34, #155724); /* Darker Green */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }
  
  .bg-color-gradient40 {
    background: linear-gradient(45deg, #ffc107, #ff8f00); /* Stronger Amber */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient40:hover {
    background: linear-gradient(45deg, #ff8f00, #ff6f00); /* Darker Amber */
    color: #fff;
    border: none; /* Remove any border/frame */
  
  }

  .bg-color-gradient41 {
    background: linear-gradient(45deg, #00FFFF, #DA70D6); /* Bright Cyan to Orchid */
    color: #fff;
    border: none;
  }
  
  .bg-color-gradient41:hover {
    background: linear-gradient(45deg, #00d9d9, #b53d9c); /* Slightly Darker Cyan to Darker Orchid */
    color: #fff;
    border: none; /* Remove any border/frame */
  }
  .bg-color-gradient42 {
  background: linear-gradient(45deg, #40E0D0, #FF1493); /* Turquoise to Deep Pink */
  color: #fff;
  border: none;
}

.bg-color-gradient42:hover {
  background: linear-gradient(45deg, #30b3a1, #d8127e); /* Slightly Darker Turquoise to Darker Deep Pink */
  color: #fff;
  border: none; /* Remove any border/frame */
}

.bg-color-gradient43 {
  background: linear-gradient(45deg, #7B1FA2, #E91E63); /* Purple to Pink */
  color: #fff;
  border: none;
}

.bg-color-gradient43:hover {
  background: linear-gradient(45deg, #651882, #c01754); /* Slightly Darker Purple to Darker Pink */
  color: #fff;
  border: none; /* Remove any border/frame */
}

.bg-color-gradient44 {
  background: linear-gradient(45deg, #00BCD4, #3F51B5); /* Cyan to Indigo */
  color: #fff;
  border: none;
}

.bg-color-gradient44:hover {
  background: linear-gradient(45deg, #00a3b9, #354090); /* Slightly Darker Cyan to Darker Indigo */
  color: #fff;
  border: none; /* Remove any border/frame */
}

.bg-color-gradient45 {
  background: linear-gradient(45deg, #2196F3, #9C27B0); /* Blue to Purple */
  color: #fff;
  border: none;
}

.bg-color-gradient45:hover {
  background: linear-gradient(45deg, #1976d9, #811e8e); /* Slightly Darker Blue to Darker Purple */
  color: #fff;
  border: none; /* Remove any border/frame */
}

.bg-color-gradient46 {
  background: linear-gradient(45deg, #00E676, #FF4081); /* Green to Pink */
  color: #fff;
  border: none;
}

.bg-color-gradient46:hover {
  background: linear-gradient(45deg, #00b865, #e6326e); /* Slightly Darker Green to Darker Pink */
  color: #fff;
  border: none; /* Remove any border/frame */
}

.bg-color-gradient47 {
  background: linear-gradient(45deg, #87ceeb, #ff1493); /* Sky Blue to Deep Pink */
  color: #fff;
  border: none;
}

.bg-color-gradient47:hover {
  background: linear-gradient(45deg, #6ca9d6, #d90c75); /* Slightly Darker Sky Blue to Darker Deep Pink */
  color: #fff;
  border: none; /* Remove any border/frame */
}

.bg-color-gradient48 {
  background: linear-gradient(45deg, #00ced1, #9370db); /* Dark Turquoise to Medium Purple */
  color: #fff;
  border: none;
}

.bg-color-gradient48:hover {
  background: linear-gradient(45deg, #00adb0, #7f4aaf); /* Slightly Darker Turquoise to Darker Medium Purple */
  color: #fff;
  border: none; /* Remove any border/frame */
}

.bg-color-gradient49 {
  background: linear-gradient(45deg, #00ff7f, #ff00ff); /* Spring Green to Magenta */
  color: #fff;
  border: none;
}

.bg-color-gradient49:hover {
  background: linear-gradient(45deg, #00d96a, #d400d4); /* Slightly Darker Spring Green to Darker Magenta */
  color: #fff;
  border: none; /* Remove any border/frame */
}

.bg-color-gradient50 {
  background: linear-gradient(45deg, #7fffd4, #ee82ee); /* Aquamarine to Violet */
  color: #fff;
  border: none;
}

.bg-color-gradient50:hover {
  background: linear-gradient(45deg, #6adfc6, #d76bd8); /* Slightly Darker Aquamarine to Darker Violet */
  color: #fff;
  border: none; /* Remove any border/frame */
}

.bg-color-gradient51 {
  background: linear-gradient(45deg, #00ffff, #ff00ff); /* Aqua to Magenta */
  color: #fff;
  border: none;
}

.bg-color-gradient51:hover {
  background: linear-gradient(45deg, #00d6d6, #e600e6); /* Slightly Darker Aqua to Darker Magenta */
  color: #fff;
  border: none; /* Remove any border/frame */
}

.bg-color-gradient52 {
  background: linear-gradient(45deg, #1e90ff, #ff69b4); /* Dodger Blue to Hot Pink */
  color: #fff;
  border: none;
}

.bg-color-gradient52:hover {
  background: linear-gradient(45deg, #1e78e4, #e8549f); /* Slightly Darker Dodger Blue to Darker Hot Pink */
  color: #fff;
  border: none;
}

.bg-color-gradient53 {
  background: linear-gradient(45deg, #87ceeb, #9370db); /* Sky Blue to Medium Purple */
  color: #fff;
  border: none;
}

.bg-color-gradient53:hover {
  background: linear-gradient(45deg, #6fb8dc, #7f46a7); /* Slightly Darker Sky Blue to Darker Medium Purple */
  color: #fff;
  border: none;
}

.bg-color-gradient54 {
  background: linear-gradient(45deg, #87ceeb, #8a2be2); /* Sky Blue to Purple */
  color: #fff;
  border: none;
}

.bg-color-gradient54:hover {
  background: linear-gradient(45deg, #73b6de, #8125d8); /* Slightly Darker Sky Blue to Darker Purple */
  color: #fff;
  border: none;
}

.bg-color-gradient55 {
  background: linear-gradient(45deg, #7fffd4, #8a2be2); /* Aquamarine to Blue Violet */
  color: #fff;
  border: none;
}

.bg-color-gradient55:hover {
  background: linear-gradient(45deg, #6fd8c6, #8125d8); /* Slightly Darker Aquamarine to Darker Blue Violet */
  color: #fff;
  border: none;
}

.bg-color-gradient56 {
  background: linear-gradient(45deg, #00bfff, #ff7f50); /* Deep Sky Blue to Coral */
  color: #fff;
  border: none;
}

.bg-color-gradient56:hover {
  background: linear-gradient(45deg, #00a7ff, #e75740); /* Slightly Darker Deep Sky Blue to Darker Coral */
  color: #fff;
  border: none;
}
.bg-color-gradient57 {
  background: linear-gradient(45deg, #1e90ff, #ff00ff); /* Dodger Blue to Magenta */
  color: #fff;
  border: none;
}

.bg-color-gradient57:hover {
  background: linear-gradient(45deg, #1e78e4, #e600e6); /* Slightly Darker Dodger Blue to Darker Magenta */
  color: #fff;
  border: none;
}

.bg-color-gradient58 {
  background: linear-gradient(45deg, #40e0d0, #ee82ee); /* Turquoise to Violet */
  color: #fff;
  border: none;
}

.bg-color-gradient58:hover {
  background: linear-gradient(45deg, #30c9ba, #d56cd2); /* Slightly Darker Turquoise to Darker Violet */
  color: #fff;
  border: none;
}

.bg-color-gradient59 {
  background: linear-gradient(45deg, #00ff7f, #8a2be2); /* Spring Green to Blue Violet */
  color: #fff;
  border: none;
}

.bg-color-gradient59:hover {
  background: linear-gradient(45deg, #00d96a, #8125d8); /* Slightly Darker Spring Green to Darker Blue Violet */
  color: #fff;
  border: none;
}

.bg-color-gradient60 {
  background: linear-gradient(45deg, #7fffd4, #ba55d3); /* Aquamarine to Medium Orchid */
  color: #fff;
  border: none;
}

.bg-color-gradient60:hover {
  background: linear-gradient(45deg, #6adfc6, #a646bc); /* Slightly Darker Aquamarine to Darker Medium Orchid */
  color: #fff;
  border: none;
}

.bg-color-gradient61 {
  background: linear-gradient(45deg, #b3e5fc, #f8bbd0); /* Light Sky Blue to Light Pink */
  color: #fff;
  border: none;
}

.bg-color-gradient61:hover {
  background: linear-gradient(45deg, #9dd8f4, #eaa3bb); /* Slightly Darker Light Sky Blue to Darker Light Pink */
  color: #fff;
  border: none;
}

.bg-color-gradient62 {
  background: linear-gradient(45deg, #b2ebf2, #ce93d8); /* Light Cyan to Light Purple */
  color: #fff;
  border: none;
}

.bg-color-gradient62:hover {
  background: linear-gradient(45deg, #9cdfe4, #bc76bf); /* Slightly Darker Light Cyan to Darker Light Purple */
  color: #fff;
  border: none;
}

.bg-color-gradient63 {
  background: linear-gradient(45deg, #e1f5fe, #f3e5f5); /* Light Blue to Lavender */
  color: #fff;
  border: none;
}

.bg-color-gradient63:hover {
  background: linear-gradient(45deg, #c7e9fb, #e7d3ec); /* Slightly Darker Light Blue to Darker Lavender */
  color: #fff;
  border: none;
}

.bg-color-gradient64 {
  background: linear-gradient(45deg, #d7ccc8, #d1c4e9); /* Light Brown to Light Purple */
  color: #fff;
  border: none;
}

.bg-color-gradient64:hover {
  background: linear-gradient(45deg, #c1b9b6, #b9b0df); /* Slightly Darker Light Brown to Darker Light Purple */
  color: #fff;
  border: none;
}
.bg-color-gradient65 {
  background: linear-gradient(45deg, #00ffff, #ff69b4); /* Aqua to Hot Pink */
  color: #fff;
  border: none;
}

.bg-color-gradient65:hover {
  background: linear-gradient(45deg, #00e6e6, #e64d99); /* Slightly Darker Aqua to Darker Hot Pink */
  color: #fff;
  border: none;
}

.bg-color-gradient66 {
  background: linear-gradient(45deg, #00bfff, #ba55d3); /* Deep Sky Blue to Medium Orchid */
  color: #fff;
  border: none;
}

.bg-color-gradient66:hover {
  background: linear-gradient(45deg, #00a7ff, #a646bc); /* Slightly Darker Deep Sky Blue to Darker Medium Orchid */
  color: #fff;
  border: none;
}

.bg-color-gradient67 {
  background: linear-gradient(45deg, #1e90ff, #ff8c00); /* Dodger Blue to Dark Orange */
  color: #fff;
  border: none;
}

.bg-color-gradient67:hover {
  background: linear-gradient(45deg, #1e78e4, #e37f00); /* Slightly Darker Dodger Blue to Darker Dark Orange */
  color: #fff;
  border: none;
}

.bg-color-gradient68 {
  background: linear-gradient(45deg, #00ff7f, #ba55d3); /* Spring Green to Medium Orchid */
  color: #fff;
  border: none;
}

.bg-color-gradient68:hover {
  background: linear-gradient(45deg, #00d96a, #a646bc); /* Slightly Darker Spring Green to Darker Medium Orchid */
  color: #fff;
  border: none;
}

.bg-color-gradient69 {
  background: linear-gradient(45deg, #b2ebf2, #ffcc80); /* Light Cyan to Orange */
  color: #fff;
  border: none;
}

.bg-color-gradient69:hover {
  background: linear-gradient(45deg, #96dceb, #ffb366); /* Slightly Darker Light Cyan to Darker Orange */
  color: #fff;
  border: none;
}

.bg-color-gradient70 {
  background: linear-gradient(to right, #ffffff, #008080); /* White to Teal */
  color: #fff;
  border: none;
}

.bg-color-gradient70:hover {
  background: linear-gradient(to right, #008080, #ffffff); /* Teal to White */
  color: #fff;
  border: none;
}


/* Gradient 71 */
.bg-color-gradient71 {
  background: linear-gradient(45deg, #ff7f82 0%, #f6b0b6 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient71:hover {
  background: linear-gradient(45deg, #f2747a 0%, #f29d9f 100%);
  color: #fff;
  border: none;
}

/* Gradient 72 */
.bg-color-gradient72 {
  background: linear-gradient(45deg, #7ca5f9 0%, #a8d5fa 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient72:hover {
  background: linear-gradient(45deg, #5f8be8 0%, #83b5f9 100%);
  color: #fff;
  border: none;
}

/* Gradient 73 */
.bg-color-gradient73 {
  background: linear-gradient(45deg, #d25cfa 0%, #d73867 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient73:hover {
  background: linear-gradient(45deg, #c44bdc 0%, #cc4f78 100%);
  color: #fff;
  border: none;
}

/* Gradient 74 */
.bg-color-gradient74 {
  background: linear-gradient(45deg, #59e394 0%, #6dcaf9 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient74:hover {
  background: linear-gradient(45deg, #44d485 0%, #75bef9 100%);
  color: #fff;
  border: none;
}

/* Gradient 75 */
.bg-color-gradient75 {
  background: linear-gradient(45deg, #b1c7d9 0%, #cdd9e1 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient75:hover {
  background: linear-gradient(45deg, #9fb0c6 0%, #bcd0dd 100%);
  color: #fff;
  border: none;
}






/* Transparent Gradients 76 */


/* Gradient Transparent 1 */
.bg-color-gradient-transparent1 {
  background: linear-gradient(45deg, #ff7f82 0%, rgba(255, 127, 130, 0) 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent1:hover {
  background: linear-gradient(45deg, #e36b6f 0%, rgba(227, 107, 111, 0) 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 2 */
.bg-color-gradient-transparent2 {
  background: linear-gradient(45deg, #7ca5f9 0%, rgba(124, 165, 249, 0) 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent2:hover {
  background: linear-gradient(45deg, #6b8ad9 0%, rgba(107, 138, 217, 0) 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 3 */
.bg-color-gradient-transparent3 {
  background: linear-gradient(45deg, #d25cfa 0%, rgba(210, 92, 250, 0) 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent3:hover {
  background: linear-gradient(45deg, #b64dcb 0%, rgba(182, 77, 203, 0) 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 4 */
.bg-color-gradient-transparent4 {
  background: linear-gradient(45deg, #59e394 0%, rgba(89, 227, 148, 0) 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent4:hover {
  background: linear-gradient(45deg, #4bc882 0%, rgba(75, 200, 130, 0) 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 5 */
.bg-color-gradient-transparent5 {
  background: linear-gradient(45deg, #b1c7d9 0%, rgba(177, 199, 217, 0) 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent5:hover {
  background: linear-gradient(45deg, #9aaebf 0%, rgba(154, 174, 191, 0) 100%);
  color: #fff;
  border: none;
}



/* Gradient Transparent 6 */
.bg-color-gradient-transparent6 {
  background: linear-gradient(45deg, #a1c4fd 0%, rgba(161, 196, 253, 0) 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent6:hover {
  background: linear-gradient(45deg, #8babea 0%, rgba(139, 171, 234, 0) 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 7 */
.bg-color-gradient-transparent7 {
  background: linear-gradient(45deg, #f093fb 0%, rgba(240, 147, 251, 0) 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent7:hover {
  background: linear-gradient(45deg, #d580eb 0%, rgba(213, 128, 235, 0) 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 8 */
.bg-color-gradient-transparent8 {
  background: linear-gradient(45deg, #84fab0 0%, rgba(132, 250, 176, 0) 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent8:hover {
  background: linear-gradient(45deg, #70e89a 0%, rgba(112, 232, 154, 0) 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent */
.bg-color-gradient-transparent9 {
  background: linear-gradient(to right, transparent 0%, rgba(255, 154, 158, 0.5) 100%, #ff9a9e 100%, #fad0c4 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent9:hover {
  background: linear-gradient(to right, transparent 0%, rgba(248, 160, 177, 0.5) 100%, #f8a0b1 100%, #f4a2b0 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 10 */
.bg-color-gradient-transparent10 {
  background: linear-gradient(to right, transparent 0%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #c2e9fb 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent10:hover {
  background: linear-gradient(to right, transparent 0%, rgba(142, 190, 250, 0.5) 100%, #8ebefa 100%, #a1c4fd 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 11 */
.bg-color-gradient-transparent11 {
  background: linear-gradient(to right, transparent 0%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #f5576c 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent11:hover {
  background: linear-gradient(to right, transparent 0%, rgba(236, 116, 163, 0.5) 100%, #ec74a3 100%, #f06292 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 12 */
.bg-color-gradient-transparent12 {
  background: linear-gradient(to right, transparent 0%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #8fd3f4 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent12:hover {
  background: linear-gradient(to right, transparent 0%, rgba(110, 231, 183, 0.5) 100%, #6ee7b7 100%, #9ae1f9 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 13 */
.bg-color-gradient-transparent13 {
  background: linear-gradient(to right, transparent 0%, rgba(207, 217, 223, 0.5) 100%, #cfd9df 100%, #e2ebf0 100%);
  color: #fff; /* Ensure text remains black */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent13:hover {
  background: linear-gradient(to right, transparent 0%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #d8e2e7 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 14 */
.bg-color-gradient-transparent14 {
  background: linear-gradient(to right, transparent 0%, rgba(79, 172, 254, 0.5) 100%, #4facfe 100%, #00f2fe 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent14:hover {
  background: linear-gradient(to right, transparent 0%, rgba(50, 155, 246, 0.5) 100%, #329bf6 100%, #00d3f4 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 15 */
.bg-color-gradient-transparent15 {
  background: linear-gradient(to right, transparent 0%, rgba(226, 16, 16, 0.5) 100%, #e21010 100%, #b50d0d 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent15:hover {
  background: linear-gradient(to right, transparent 0%, rgba(181, 13, 13, 0.5) 100%, #b50d0d 100%, #7a0707 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 16 */
.bg-color-gradient-transparent16 {
  background: linear-gradient(to right, transparent 0%, rgba(245, 98, 98, 0.5) 100%, #f56262 100%, #d03d3d 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent16:hover {
  background: linear-gradient(to right, transparent 0%, rgba(208, 61, 61, 0.5) 100%, #d03d3d 100%, #a90b0b 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}
/* Gradient Transparent 17 */
.bg-color-gradient-transparent17 {
  background: linear-gradient(to right, transparent 0%, rgba(107, 224, 154, 0.5) 100%, #6be09a 100%, #7bb2d3 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent17:hover {
  background: linear-gradient(to right, transparent 0%, rgba(84, 196, 126, 0.5) 100%, #54c47e 100%, #5d99bf 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 18 */
.bg-color-gradient-transparent18 {
  background: linear-gradient(to right, transparent 0%, rgba(255, 87, 34, 0.5) 100%, #ff5722 100%, #d84315 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent18:hover {
  background: linear-gradient(to right, transparent 0%, rgba(230, 74, 25, 0.5) 100%, #e64a19 100%, #b71c1c 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 19 */
.bg-color-gradient-transparent19 {
  background: linear-gradient(to right, transparent 0%, rgba(249, 105, 187, 0.5) 100%, #f969bb 100%, #c2185b 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent19:hover {
  background: linear-gradient(to right, transparent 0%, rgba(194, 24, 91, 0.5) 100%, #c2185b 100%, #880e4f 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 20 */
.bg-color-gradient-transparent20 {
  background: linear-gradient(to right, transparent 0%, rgba(233, 30, 99, 0.5) 100%, #e91e63 100%, #c2185b 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent20:hover {
  background: linear-gradient(to right, transparent 0%, rgba(194, 24, 91, 0.5) 100%, #c2185b 100%, #7b1fa2 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}
/* Gradient Transparent 21 */
.bg-color-gradient-transparent21 {
  background: linear-gradient(to right, transparent 0%, rgba(0, 188, 212, 0.5) 100%, #00bcd4 100%, #00796b 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent21:hover {
  background: linear-gradient(to right, transparent 0%, rgba(0, 121, 107, 0.5) 100%, #00796b 100%, #004d40 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 22 */
.bg-color-gradient-transparent22 {
  background: linear-gradient(to right, transparent 0%, rgba(245, 230, 140, 0.5) 100%, #f5f5dc 100%, #c0c0a0 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent22:hover {
  background: linear-gradient(to right, transparent 0%, rgba(192, 192, 160, 0.5) 100%, #c0c0a0 100%, #8c8c6e 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 23 */
.bg-color-gradient-transparent23 {
  background: linear-gradient(to right, transparent 0%, rgba(63, 81, 139, 0.5) 100%, #3f51b5 100%, #1a237e 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent23:hover {
  background: linear-gradient(to right, transparent 0%, rgba(26, 35, 126, 0.5) 100%, #1a237e 100%, #000051 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 24 */
.bg-color-gradient-transparent24 {
  background: linear-gradient(to right, transparent 0%, rgba(255, 174, 51, 0.5) 100%, #ffeb3b 100%, #fdd835 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent24:hover {
  background: linear-gradient(to right, transparent 0%, rgba(253, 216, 53, 0.5) 100%, #fdd835 100%, #fbc02d 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 25 */
.bg-color-gradient-transparent25 {
  background: linear-gradient(to right, transparent 0%, rgba(211, 211, 211, 0.5) 100%, #d3d3d3 100%, #a9a9a9 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent25:hover {
  background: linear-gradient(to right, transparent 0%, rgba(187, 187, 187, 0.5) 100%, #bdbdbd 100%, #808080 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 26 */
.bg-color-gradient-transparent26 {
  background: linear-gradient(to right, transparent 0%, rgba(63, 81, 139, 0.5) 100%, #3f51b5 100%, #1a237e 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent26:hover {
  background: linear-gradient(to right, transparent 0%, rgba(26, 35, 126, 0.5) 100%, #1a237e 100%, #000051 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 27 */
.bg-color-gradient-transparent27 {
  background: linear-gradient(to right, transparent 0%, rgba(156, 228, 154, 0.5) 100%, #9ce49a 100%, #7bb2d3 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent27:hover {
  background: linear-gradient(to right, transparent 0%, rgba(124, 221, 123, 0.5) 100%, #7bb2d3 100%, #5d99bf 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 28 */
.bg-color-gradient-transparent28 {
  background: linear-gradient(to right, transparent 0%, rgba(255, 152, 0, 0.5) 100%, #ff9800 100%, #e65100 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent28:hover {
  background: linear-gradient(to right, transparent 0%, rgba(239, 108, 0, 0.5) 100%, #e65100 100%, #b71c1c 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 29 */
.bg-color-gradient-transparent29 {
  background: linear-gradient(to right, transparent 0%, rgba(0, 150, 136, 0.5) 100%, #009688 100%, #00796b 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent29:hover {
  background: linear-gradient(to right, transparent 0%, rgba(0, 121, 107, 0.5) 100%, #00796b 100%, #004d40 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}


/* Gradient Transparent 30 */
.bg-color-gradient-transparent30 {
  background: linear-gradient(to right, transparent 0%, rgba(255, 235, 59, 0.5) 100%, #ffeb3b 100%, #fdd835 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent30:hover {
  background: linear-gradient(to right, transparent 0%, rgba(253, 216, 53, 0.5) 100%, #fdd835 100%, #fbc02d 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 31 */
.bg-color-gradient-transparent31 {
  background: linear-gradient(to right, transparent 0%, rgba(255, 152, 0, 0.5) 100%, #ff9800 100%, #e65100 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent31:hover {
  background: linear-gradient(to right, transparent 0%, rgba(239, 108, 0, 0.5) 100%, #e65100 100%, #b71c1c 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 32 */
.bg-color-gradient-transparent32 {
  background: linear-gradient(to right, transparent 0%, rgba(0, 150, 136, 0.5) 100%, #009688 100%, #00796b 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent32:hover {
  background: linear-gradient(to right, transparent 0%, rgba(0, 121, 107, 0.5) 100%, #00796b 100%, #004d40 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}
/* Gradient Transparent 33 */
.bg-color-gradient-transparent33 {
  background: linear-gradient(to right, transparent 0%, rgba(63, 81, 139, 0.5) 100%, #3f51b5 100%, #1a237e 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent33:hover {
  background: linear-gradient(to right, transparent 0%, rgba(26, 35, 126, 0.5) 100%, #1a237e 100%, #000051 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 34 */
.bg-color-gradient-transparent34 {
  background: linear-gradient(to right, transparent 0%, rgba(255, 174, 51, 0.5) 100%, #ffeb3b 100%, #fdd835 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent34:hover {
  background: linear-gradient(to right, transparent 0%, rgba(253, 216, 53, 0.5) 100%, #fdd835 100%, #fbc02d 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}

/* Gradient Transparent 35 */
.bg-color-gradient-transparent35 {
  background: linear-gradient(to right, transparent 0%, rgba(211, 211, 211, 0.5) 100%, #d3d3d3 100%, #a9a9a9 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent35:hover {
  background: linear-gradient(to right, transparent 0%, rgba(187, 187, 187, 0.5) 100%, #bdbdbd 100%, #808080 100%);
  color: #fff; /* Prevent text color change */
  border: none;

}




/* HALF TRANSPARENT LEFT*/

/* Gradient 1/2 Transparent */


/* Gradient Transparent Half L1 */
.bg-color-gradient-transparent-half-l1 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(255, 174, 51, 0.5) 100%, #ffeb3b 100%, #fdd835 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}


.bg-color-gradient-transparent-half-l1:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(253, 216, 53, 0.5) 100%, #fdd835 100%, #fbc02d 100%);
  color: #fff; /* Prevent text color change */
  border: none;
}

/* Gradient Transparent 2 */
.bg-color-gradient-transparent-half-l2 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(124, 165, 249, 0.5) 100%, #7ca5f9 100%, #6b8ad9 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l2:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(107, 138, 217, 0.5) 100%, #6b8ad9 100%, #4e6da3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 3 */
.bg-color-gradient-transparent-half-l3 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(210, 92, 250, 0.5) 100%, #d25cfa 100%, #b64dcb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l3:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(182, 77, 203, 0.5) 100%, #b64dcb 100%, #91419b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 4 */
.bg-color-gradient-transparent-half-l4 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(89, 227, 148, 0.5) 100%, #59e394 100%, #4bc882 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l4:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(75, 200, 130, 0.5) 100%, #4bc882 100%, #3b9e6a 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 5 */
.bg-color-gradient-transparent-half-l5 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(177, 199, 217, 0.5) 100%, #b1c7d9 100%, #9aaebf 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l5:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(154, 174, 191, 0.5) 100%, #9aaebf 100%, #798a97 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 6 */
.bg-color-gradient-transparent-half-l6 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8babea 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l6:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(139, 171, 234, 0.5) 100%, #8babea 100%, #6689d3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 7 */
.bg-color-gradient-transparent-half-l7 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #d580eb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l7:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(213, 128, 235, 0.5) 100%, #d580eb 100%, #ad4bcf 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 8 */
.bg-color-gradient-transparent-half-l8 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #70e89a 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l8:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(112, 232, 154, 0.5) 100%, #70e89a 100%, #4fc674 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 9 */
.bg-color-gradient-transparent-half-l9 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(255, 154, 158, 0.5) 100%, #ff9a9e 100%, #f8a0b1 100%);
  color: #fff;
  border: none;
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l9:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(248, 160, 177, 0.5) 100%, #f8a0b1 100%, #f38190 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 10 */
.bg-color-gradient-transparent-half-l10 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8ebefa 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l10:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(142, 190, 250, 0.5) 100%, #8ebefa 100%, #6b9cd9 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 11 */
.bg-color-gradient-transparent-half-l11 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #ec74a3 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l11:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(236, 116, 163, 0.5) 100%, #ec74a3 100%, #f06292 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 12 */
.bg-color-gradient-transparent-half-l12 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #6ee7b7 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l12:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(110, 231, 183, 0.5) 100%, #6ee7b7 100%, #4ad39c 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 13 */
.bg-color-gradient-transparent-half-l13 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(207, 217, 223, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l13:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 14 */
.bg-color-gradient-transparent-half-l14 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(79, 172, 254, 0.5) 100%, #4facfe 100%, #329bf6 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l14:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(50, 155, 246, 0.5) 100%, #329bf6 100%, #008ae6 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 15 */
.bg-color-gradient-transparent-half-l15 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(226, 16, 16, 0.5) 100%, #e21010 100%, #b50d0d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l15:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(181, 13, 13, 0.5) 100%, #b50d0d 100%, #930a0a 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 16 */
.bg-color-gradient-transparent-half-l16 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(245, 98, 98, 0.5) 100%, #f56262 100%, #d03d3d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l16:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(208, 61, 61, 0.5) 100%, #d03d3d 100%, #a90b0b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 17 */
.bg-color-gradient-transparent-half-l17 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(107, 224, 154, 0.5) 100%, #6be09a 100%, #54c47e 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l17:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(84, 196, 126, 0.5) 100%, #54c47e 100%, #3ea658 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 18 */
.bg-color-gradient-transparent-half-l18 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(207, 216, 220, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l18:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 19 */
.bg-color-gradient-transparent-half-l19 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(47, 53, 66, 0.5) 100%, #2f3542 100%, #222831 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-l19:hover {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(30, 34, 42, 0.5) 100%, #222831 100%, #1a1f29 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 20 */
.bg-color-gradient-transparent-half-l20 {
  background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(249, 202, 36, 0.5) 100%, #f9ca24 100%, #f39c12 100%);
  color: #fff;
  border: none;
}





/* HALF TRANSPARENT RIGHT*/



/* Gradient Transparent Half R1 */
.bg-color-gradient-transparent-half-r1 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(255, 174, 51, 0.5) 100%, #ffeb3b 100%, #fdd835 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}


.bg-color-gradient-transparent-half-r1:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(253, 216, 53, 0.5) 100%, #fdd835 100%, #fbc02d 100%);
  color: #fff; /* Prevent text color change */
  border: none;
}



/* Gradient Transparent 2 */
.bg-color-gradient-transparent-half-r2 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(124, 165, 249, 0.5) 100%, #7ca5f9 100%, #6b8ad9 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r2:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(107, 138, 217, 0.5) 100%, #6b8ad9 100%, #4e6da3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 3 */
.bg-color-gradient-transparent-half-r3 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(210, 92, 250, 0.5) 100%, #d25cfa 100%, #b64dcb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r3:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(182, 77, 203, 0.5) 100%, #b64dcb 100%, #91419b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 4 */
.bg-color-gradient-transparent-half-r4 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(89, 227, 148, 0.5) 100%, #59e394 100%, #4bc882 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r4:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(75, 200, 130, 0.5) 100%, #4bc882 100%, #3b9e6a 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 5 */
.bg-color-gradient-transparent-half-r5 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(177, 199, 217, 0.5) 100%, #b1c7d9 100%, #9aaebf 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r5:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(154, 174, 191, 0.5) 100%, #9aaebf 100%, #798a97 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 6 */
.bg-color-gradient-transparent-half-r6 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8babea 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r6:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(139, 171, 234, 0.5) 100%, #8babea 100%, #6689d3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 7 */
.bg-color-gradient-transparent-half-r7 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #d580eb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r7:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(213, 128, 235, 0.5) 100%, #d580eb 100%, #ad4bcf 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 8 */
.bg-color-gradient-transparent-half-r8 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #70e89a 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r8:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(112, 232, 154, 0.5) 100%, #70e89a 100%, #4fc674 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 9 */
.bg-color-gradient-transparent-half-r9 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(255, 154, 158, 0.5) 100%, #ff9a9e 100%, #f8a0b1 100%);
  color: #fff;
  border: none;
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r9:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(248, 160, 177, 0.5) 100%, #f8a0b1 100%, #f38190 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 10 */
.bg-color-gradient-transparent-half-r10 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8ebefa 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r10:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(142, 190, 250, 0.5) 100%, #8ebefa 100%, #6b9cd9 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 11 */
.bg-color-gradient-transparent-half-r11 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #ec74a3 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r11:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(236, 116, 163, 0.5) 100%, #ec74a3 100%, #f06292 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 12 */
.bg-color-gradient-transparent-half-r12 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #6ee7b7 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r12:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(110, 231, 183, 0.5) 100%, #6ee7b7 100%, #4ad39c 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 13 */
.bg-color-gradient-transparent-half-r13 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(207, 217, 223, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r13:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 14 */
.bg-color-gradient-transparent-half-r14 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(79, 172, 254, 0.5) 100%, #4facfe 100%, #329bf6 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r14:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(50, 155, 246, 0.5) 100%, #329bf6 100%, #008ae6 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 15 */
.bg-color-gradient-transparent-half-r15 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(226, 16, 16, 0.5) 100%, #e21010 100%, #b50d0d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r15:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(181, 13, 13, 0.5) 100%, #b50d0d 100%, #930a0a 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 16 */
.bg-color-gradient-transparent-half-r16 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(245, 98, 98, 0.5) 100%, #f56262 100%, #d03d3d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r16:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(208, 61, 61, 0.5) 100%, #d03d3d 100%, #a90b0b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 17 */
.bg-color-gradient-transparent-half-r17 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(107, 224, 154, 0.5) 100%, #6be09a 100%, #54c47e 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r17:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(84, 196, 126, 0.5) 100%, #54c47e 100%, #3ea658 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 18 */
.bg-color-gradient-transparent-half-r18 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(207, 216, 220, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r18:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 19 */
.bg-color-gradient-transparent-half-r19 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(47, 53, 66, 0.5) 100%, #2f3542 100%, #222831 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-r19:hover {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(30, 34, 42, 0.5) 100%, #222831 100%, #1a1f29 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 20 */
.bg-color-gradient-transparent-half-r20 {
  background: linear-gradient(to left, transparent 0%, transparent 50%, rgba(249, 202, 36, 0.5) 100%, #f9ca24 100%, #f39c12 100%);
  color: #fff;
  border: none;
}




/* QUATER TRANSPARENT RIGHT */

/* Gradient 1/4 Transparent */

/* Gradient Transparent Quater R1 */
.bg-color-gradient-transparent-quater-r1 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(255, 174, 51, 0.5) 100%, #ffeb3b 100%, #fdd835 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent-quater-r1:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(253, 216, 53, 0.5) 100%, #fdd835 100%, #fbc02d 100%);
  color: #fff; /* Prevent text color change */
  border: none;
}



/* Gradient Transparent 2 */
.bg-color-gradient-transparent-quater-r2 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(124, 165, 249, 0.5) 100%, #7ca5f9 100%, #6b8ad9 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r2:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(107, 138, 217, 0.5) 100%, #6b8ad9 100%, #4e6da3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 3 */
.bg-color-gradient-transparent-quater-r3 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(210, 92, 250, 0.5) 100%, #d25cfa 100%, #b64dcb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r3:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(182, 77, 203, 0.5) 100%, #b64dcb 100%, #91419b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 4 */
.bg-color-gradient-transparent-quater-r4 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(89, 227, 148, 0.5) 100%, #59e394 100%, #4bc882 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r4:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(75, 200, 130, 0.5) 100%, #4bc882 100%, #3b9e6a 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 5 */
.bg-color-gradient-transparent-quater-r5 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(177, 199, 217, 0.5) 100%, #b1c7d9 100%, #9aaebf 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r5:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(154, 174, 191, 0.5) 100%, #9aaebf 100%, #798a97 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 6 */
.bg-color-gradient-transparent-quater-r6 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8babea 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r6:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(139, 171, 234, 0.5) 100%, #8babea 100%, #6689d3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 7 */
.bg-color-gradient-transparent-quater-r7 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #d580eb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r7:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(213, 128, 235, 0.5) 100%, #d580eb 100%, #ad4bcf 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 8 */
.bg-color-gradient-transparent-quater-r8 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #70e89a 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r8:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(112, 232, 154, 0.5) 100%, #70e89a 100%, #4fc674 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 9 */
.bg-color-gradient-transparent-quater-r9 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(255, 154, 158, 0.5) 100%, #ff9a9e 100%, #f8a0b1 100%);
  color: #fff;
  border: none;
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r9:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(248, 160, 177, 0.5) 100%, #f8a0b1 100%, #f38190 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 10 */
.bg-color-gradient-transparent-quater-r10 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8ebefa 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r10:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(142, 190, 250, 0.5) 100%, #8ebefa 100%, #6b9cd9 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 11 */
.bg-color-gradient-transparent-quater-r11 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #ec74a3 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r11:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(236, 116, 163, 0.5) 100%, #ec74a3 100%, #f06292 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 12 */
.bg-color-gradient-transparent-quater-r12 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #6ee7b7 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r12:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(110, 231, 183, 0.5) 100%, #6ee7b7 100%, #4ad39c 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 13 */
.bg-color-gradient-transparent-quater-r13 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(207, 217, 223, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r13:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 14 */
.bg-color-gradient-transparent-quater-r14 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(79, 172, 254, 0.5) 100%, #4facfe 100%, #329bf6 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r14:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(50, 155, 246, 0.5) 100%, #329bf6 100%, #008ae6 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 15 */
.bg-color-gradient-transparent-quater-r15 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(226, 16, 16, 0.5) 100%, #e21010 100%, #b50d0d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r15:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(181, 13, 13, 0.5) 100%, #b50d0d 100%, #930a0a 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 16 */
.bg-color-gradient-transparent-quater-r16 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(245, 98, 98, 0.5) 100%, #f56262 100%, #d03d3d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r16:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(208, 61, 61, 0.5) 100%, #d03d3d 100%, #a90b0b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 17 */
.bg-color-gradient-transparent-quater-r17 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(107, 224, 154, 0.5) 100%, #6be09a 100%, #54c47e 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r17:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(84, 196, 126, 0.5) 100%, #54c47e 100%, #3ea658 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 18 */
.bg-color-gradient-transparent-quater-r18 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(207, 216, 220, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r18:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 19 */
.bg-color-gradient-transparent-quater-r19 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(47, 53, 66, 0.5) 100%, #2f3542 100%, #222831 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-r19:hover {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(30, 34, 42, 0.5) 100%, #222831 100%, #1a1f29 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 20 */
.bg-color-gradient-transparent-quater-r20 {
  background: linear-gradient(to left, transparent 0%, transparent 25%, rgba(249, 202, 36, 0.5) 100%, #f9ca24 100%, #f39c12 100%);
  color: #fff;
  border: none;
}







/* QUATER TRANSPARENT LEFT */



/* Gradient Transparent Quater L1 */
.bg-color-gradient-transparent-quater-l1 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(255, 174, 51, 0.5) 100%, #ffeb3b 100%, #fdd835 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent-quater-l1:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(253, 216, 53, 0.5) 100%, #fdd835 100%, #fbc02d 100%);
  color: #fff; /* Prevent text color change */
  border: none;
}

/* Gradient Transparent 2 */
.bg-color-gradient-transparent-quater-l2 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(124, 165, 249, 0.5) 100%, #7ca5f9 100%, #6b8ad9 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l2:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(107, 138, 217, 0.5) 100%, #6b8ad9 100%, #4e6da3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 3 */
.bg-color-gradient-transparent-quater-l3 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(210, 92, 250, 0.5) 100%, #d25cfa 100%, #b64dcb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l3:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(182, 77, 203, 0.5) 100%, #b64dcb 100%, #91419b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 4 */
.bg-color-gradient-transparent-quater-l4 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(89, 227, 148, 0.5) 100%, #59e394 100%, #4bc882 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l4:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(75, 200, 130, 0.5) 100%, #4bc882 100%, #3b9e6a 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 5 */
.bg-color-gradient-transparent-quater-l5 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(177, 199, 217, 0.5) 100%, #b1c7d9 100%, #9aaebf 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l5:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(154, 174, 191, 0.5) 100%, #9aaebf 100%, #798a97 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 6 */
.bg-color-gradient-transparent-quater-l6 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8babea 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l6:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(139, 171, 234, 0.5) 100%, #8babea 100%, #6689d3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 7 */
.bg-color-gradient-transparent-quater-l7 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #d580eb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l7:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(213, 128, 235, 0.5) 100%, #d580eb 100%, #ad4bcf 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 8 */
.bg-color-gradient-transparent-quater-l8 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #70e89a 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l8:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(112, 232, 154, 0.5) 100%, #70e89a 100%, #4fc674 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 9 */
.bg-color-gradient-transparent-quater-l9 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(255, 154, 158, 0.5) 100%, #ff9a9e 100%, #f8a0b1 100%);
  color: #fff;
  border: none;
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l9:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(248, 160, 177, 0.5) 100%, #f8a0b1 100%, #f38190 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 10 */
.bg-color-gradient-transparent-quater-l10 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8ebefa 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l10:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(142, 190, 250, 0.5) 100%, #8ebefa 100%, #6b9cd9 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 11 */
.bg-color-gradient-transparent-quater-l11 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #ec74a3 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l11:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(236, 116, 163, 0.5) 100%, #ec74a3 100%, #f06292 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 12 */
.bg-color-gradient-transparent-quater-l12 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #6ee7b7 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l12:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(110, 231, 183, 0.5) 100%, #6ee7b7 100%, #4ad39c 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 13 */
.bg-color-gradient-transparent-quater-l13 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(207, 217, 223, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l13:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 14 */
.bg-color-gradient-transparent-quater-l14 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(79, 172, 254, 0.5) 100%, #4facfe 100%, #329bf6 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l14:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(50, 155, 246, 0.5) 100%, #329bf6 100%, #008ae6 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 15 */
.bg-color-gradient-transparent-quater-l15 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(226, 16, 16, 0.5) 100%, #e21010 100%, #b50d0d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l15:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(181, 13, 13, 0.5) 100%, #b50d0d 100%, #930a0a 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 16 */
.bg-color-gradient-transparent-quater-l16 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(245, 98, 98, 0.5) 100%, #f56262 100%, #d03d3d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l16:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(208, 61, 61, 0.5) 100%, #d03d3d 100%, #a90b0b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 17 */
.bg-color-gradient-transparent-quater-l17 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(107, 224, 154, 0.5) 100%, #6be09a 100%, #54c47e 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l17:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(84, 196, 126, 0.5) 100%, #54c47e 100%, #3ea658 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 18 */
.bg-color-gradient-transparent-quater-l18 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(207, 216, 220, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l18:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 19 */
.bg-color-gradient-transparent-quater-l19 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(47, 53, 66, 0.5) 100%, #2f3542 100%, #222831 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-l19:hover {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(30, 34, 42, 0.5) 100%, #222831 100%, #1a1f29 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 20 */
.bg-color-gradient-transparent-quater-l20 {
  background: linear-gradient(to right, transparent 0%, transparent 25%, rgba(249, 202, 36, 0.5) 100%, #f9ca24 100%, #f39c12 100%);
  color: #fff;
  border: none;
}







/* HALF TRANSPARENT TOP*/

/* Gradient 1/2 Transparent TOP */


/* Gradient Transparent Half TOP1 */
.bg-color-gradient-transparent-half-t1 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(255, 174, 51, 0.5) 100%, #ffeb3b 100%, #fdd835 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}


.bg-color-gradient-transparent-half-t1:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(253, 216, 53, 0.5) 100%, #fdd835 100%, #fbc02d 100%);
  color: #fff; /* Prevent text color change */
  border: none;
}

/* Gradient Transparent 2 */
.bg-color-gradient-transparent-half-t2 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(124, 165, 249, 0.5) 100%, #7ca5f9 100%, #6b8ad9 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t2:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(107, 138, 217, 0.5) 100%, #6b8ad9 100%, #4e6da3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 3 */
.bg-color-gradient-transparent-half-t3 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(210, 92, 250, 0.5) 100%, #d25cfa 100%, #b64dcb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t3:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(182, 77, 203, 0.5) 100%, #b64dcb 100%, #91419b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 4 */
.bg-color-gradient-transparent-half-t4 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(89, 227, 148, 0.5) 100%, #59e394 100%, #4bc882 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t4:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(75, 200, 130, 0.5) 100%, #4bc882 100%, #3b9e6a 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 5 */
.bg-color-gradient-transparent-half-t5 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(177, 199, 217, 0.5) 100%, #b1c7d9 100%, #9aaebf 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t5:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(154, 174, 191, 0.5) 100%, #9aaebf 100%, #798a97 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 6 */
.bg-color-gradient-transparent-half-t6 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8babea 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t6:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(139, 171, 234, 0.5) 100%, #8babea 100%, #6689d3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 7 */
.bg-color-gradient-transparent-half-t7 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #d580eb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t7:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(213, 128, 235, 0.5) 100%, #d580eb 100%, #ad4bcf 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 8 */
.bg-color-gradient-transparent-half-t8 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #70e89a 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t8:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(112, 232, 154, 0.5) 100%, #70e89a 100%, #4fc674 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 9 */
.bg-color-gradient-transparent-half-t9 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(255, 154, 158, 0.5) 100%, #ff9a9e 100%, #f8a0b1 100%);
  color: #fff;
  border: none;
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t9:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(248, 160, 177, 0.5) 100%, #f8a0b1 100%, #f38190 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 10 */
.bg-color-gradient-transparent-half-t10 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8ebefa 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t10:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(142, 190, 250, 0.5) 100%, #8ebefa 100%, #6b9cd9 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 11 */
.bg-color-gradient-transparent-half-t11 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #ec74a3 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t11:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(236, 116, 163, 0.5) 100%, #ec74a3 100%, #f06292 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 12 */
.bg-color-gradient-transparent-half-t12 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #6ee7b7 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t12:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(110, 231, 183, 0.5) 100%, #6ee7b7 100%, #4ad39c 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 13 */
.bg-color-gradient-transparent-half-t13 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(207, 217, 223, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t13:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 14 */
.bg-color-gradient-transparent-half-t14 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(79, 172, 254, 0.5) 100%, #4facfe 100%, #329bf6 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t14:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(50, 155, 246, 0.5) 100%, #329bf6 100%, #008ae6 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 15 */
.bg-color-gradient-transparent-half-t15 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(226, 16, 16, 0.5) 100%, #e21010 100%, #b50d0d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t15:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(181, 13, 13, 0.5) 100%, #b50d0d 100%, #930a0a 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 16 */
.bg-color-gradient-transparent-half-t16 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(245, 98, 98, 0.5) 100%, #f56262 100%, #d03d3d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t16:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(208, 61, 61, 0.5) 100%, #d03d3d 100%, #a90b0b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 17 */
.bg-color-gradient-transparent-half-t17 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(107, 224, 154, 0.5) 100%, #6be09a 100%, #54c47e 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t17:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(84, 196, 126, 0.5) 100%, #54c47e 100%, #3ea658 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 18 */
.bg-color-gradient-transparent-half-t18 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(207, 216, 220, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t18:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 19 */
.bg-color-gradient-transparent-half-t19 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(47, 53, 66, 0.5) 100%, #2f3542 100%, #222831 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-t19:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(30, 34, 42, 0.5) 100%, #222831 100%, #1a1f29 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 20 */
.bg-color-gradient-transparent-half-t20 {
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(249, 202, 36, 0.5) 100%, #f9ca24 100%, #f39c12 100%);
  color: #fff;
  border: none;
}





/* HALF TRANSPARENT BOTTOM*/

/* Gradient 1/2 Transparent BOTTOM */


/* Gradient Transparent Half R1 */
.bg-color-gradient-transparent-half-b1 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(255, 174, 51, 0.5) 100%, #ffeb3b 100%, #fdd835 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}


.bg-color-gradient-transparent-half-b1:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(253, 216, 53, 0.5) 100%, #fdd835 100%, #fbc02d 100%);
  color: #fff; /* Prevent text color change */
  border: none;
}



/* Gradient Transparent 2 */
.bg-color-gradient-transparent-half-b2 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(124, 165, 249, 0.5) 100%, #7ca5f9 100%, #6b8ad9 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b2:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(107, 138, 217, 0.5) 100%, #6b8ad9 100%, #4e6da3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 3 */
.bg-color-gradient-transparent-half-b3 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(210, 92, 250, 0.5) 100%, #d25cfa 100%, #b64dcb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b3:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(182, 77, 203, 0.5) 100%, #b64dcb 100%, #91419b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 4 */
.bg-color-gradient-transparent-half-b4 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(89, 227, 148, 0.5) 100%, #59e394 100%, #4bc882 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b4:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(75, 200, 130, 0.5) 100%, #4bc882 100%, #3b9e6a 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 5 */
.bg-color-gradient-transparent-half-b5 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(177, 199, 217, 0.5) 100%, #b1c7d9 100%, #9aaebf 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b5:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(154, 174, 191, 0.5) 100%, #9aaebf 100%, #798a97 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 6 */
.bg-color-gradient-transparent-half-b6 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8babea 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b6:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(139, 171, 234, 0.5) 100%, #8babea 100%, #6689d3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 7 */
.bg-color-gradient-transparent-half-b7 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #d580eb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b7:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(213, 128, 235, 0.5) 100%, #d580eb 100%, #ad4bcf 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 8 */
.bg-color-gradient-transparent-half-b8 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #70e89a 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b8:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(112, 232, 154, 0.5) 100%, #70e89a 100%, #4fc674 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 9 */
.bg-color-gradient-transparent-half-b9 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(255, 154, 158, 0.5) 100%, #ff9a9e 100%, #f8a0b1 100%);
  color: #fff;
  border: none;
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b9:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(248, 160, 177, 0.5) 100%, #f8a0b1 100%, #f38190 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 10 */
.bg-color-gradient-transparent-half-b10 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8ebefa 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b10:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(142, 190, 250, 0.5) 100%, #8ebefa 100%, #6b9cd9 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 11 */
.bg-color-gradient-transparent-half-b11 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #ec74a3 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b11:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(236, 116, 163, 0.5) 100%, #ec74a3 100%, #f06292 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 12 */
.bg-color-gradient-transparent-half-b12 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #6ee7b7 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b12:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(110, 231, 183, 0.5) 100%, #6ee7b7 100%, #4ad39c 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 13 */
.bg-color-gradient-transparent-half-b13 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(207, 217, 223, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b13:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 14 */
.bg-color-gradient-transparent-half-b14 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(79, 172, 254, 0.5) 100%, #4facfe 100%, #329bf6 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b14:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(50, 155, 246, 0.5) 100%, #329bf6 100%, #008ae6 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 15 */
.bg-color-gradient-transparent-half-b15 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(226, 16, 16, 0.5) 100%, #e21010 100%, #b50d0d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b15:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(181, 13, 13, 0.5) 100%, #b50d0d 100%, #930a0a 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 16 */
.bg-color-gradient-transparent-half-b16 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(245, 98, 98, 0.5) 100%, #f56262 100%, #d03d3d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b16:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(208, 61, 61, 0.5) 100%, #d03d3d 100%, #a90b0b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 17 */
.bg-color-gradient-transparent-half-b17 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(107, 224, 154, 0.5) 100%, #6be09a 100%, #54c47e 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b17:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(84, 196, 126, 0.5) 100%, #54c47e 100%, #3ea658 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 18 */
.bg-color-gradient-transparent-half-b18 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(207, 216, 220, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b18:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 19 */
.bg-color-gradient-transparent-half-b19 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(47, 53, 66, 0.5) 100%, #2f3542 100%, #222831 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-half-b19:hover {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(30, 34, 42, 0.5) 100%, #222831 100%, #1a1f29 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 20 */
.bg-color-gradient-transparent-half-b20 {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(249, 202, 36, 0.5) 100%, #f9ca24 100%, #f39c12 100%);
  color: #fff;
  border: none;
}



/* QUATER TRANSPARENT TOP*/

/* Gradient 1/4 Transparent TOP */


/* Gradient Transparent Quater R1 */
.bg-color-gradient-transparent-quater-b1 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(255, 174, 51, 0.5) 100%, #ffeb3b 100%, #fdd835 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent-quater-b1:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(253, 216, 53, 0.5) 100%, #fdd835 100%, #fbc02d 100%);
  color: #fff; /* Prevent text color change */
  border: none;
}



/* Gradient Transparent 2 */
.bg-color-gradient-transparent-quater-b2 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(124, 165, 249, 0.5) 100%, #7ca5f9 100%, #6b8ad9 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b2:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(107, 138, 217, 0.5) 100%, #6b8ad9 100%, #4e6da3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 3 */
.bg-color-gradient-transparent-quater-b3 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(210, 92, 250, 0.5) 100%, #d25cfa 100%, #b64dcb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b3:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(182, 77, 203, 0.5) 100%, #b64dcb 100%, #91419b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 4 */
.bg-color-gradient-transparent-quater-b4 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(89, 227, 148, 0.5) 100%, #59e394 100%, #4bc882 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b4:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(75, 200, 130, 0.5) 100%, #4bc882 100%, #3b9e6a 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 5 */
.bg-color-gradient-transparent-quater-b5 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(177, 199, 217, 0.5) 100%, #b1c7d9 100%, #9aaebf 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b5:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(154, 174, 191, 0.5) 100%, #9aaebf 100%, #798a97 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 6 */
.bg-color-gradient-transparent-quater-b6 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8babea 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b6:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(139, 171, 234, 0.5) 100%, #8babea 100%, #6689d3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 7 */
.bg-color-gradient-transparent-quater-b7 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #d580eb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b7:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(213, 128, 235, 0.5) 100%, #d580eb 100%, #ad4bcf 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 8 */
.bg-color-gradient-transparent-quater-b8 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #70e89a 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b8:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(112, 232, 154, 0.5) 100%, #70e89a 100%, #4fc674 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 9 */
.bg-color-gradient-transparent-quater-b9 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(255, 154, 158, 0.5) 100%, #ff9a9e 100%, #f8a0b1 100%);
  color: #fff;
  border: none;
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b9:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(248, 160, 177, 0.5) 100%, #f8a0b1 100%, #f38190 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 10 */
.bg-color-gradient-transparent-quater-b10 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8ebefa 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b10:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(142, 190, 250, 0.5) 100%, #8ebefa 100%, #6b9cd9 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 11 */
.bg-color-gradient-transparent-quater-b11 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #ec74a3 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b11:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(236, 116, 163, 0.5) 100%, #ec74a3 100%, #f06292 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 12 */
.bg-color-gradient-transparent-quater-b12 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #6ee7b7 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b12:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(110, 231, 183, 0.5) 100%, #6ee7b7 100%, #4ad39c 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 13 */
.bg-color-gradient-transparent-quater-b13 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(207, 217, 223, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b13:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 14 */
.bg-color-gradient-transparent-quater-b14 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(79, 172, 254, 0.5) 100%, #4facfe 100%, #329bf6 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b14:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(50, 155, 246, 0.5) 100%, #329bf6 100%, #008ae6 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 15 */
.bg-color-gradient-transparent-quater-b15 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(226, 16, 16, 0.5) 100%, #e21010 100%, #b50d0d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b15:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(181, 13, 13, 0.5) 100%, #b50d0d 100%, #930a0a 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 16 */
.bg-color-gradient-transparent-quater-b16 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(245, 98, 98, 0.5) 100%, #f56262 100%, #d03d3d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b16:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(208, 61, 61, 0.5) 100%, #d03d3d 100%, #a90b0b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 17 */
.bg-color-gradient-transparent-quater-b17 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(107, 224, 154, 0.5) 100%, #6be09a 100%, #54c47e 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b17:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(84, 196, 126, 0.5) 100%, #54c47e 100%, #3ea658 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 18 */
.bg-color-gradient-transparent-quater-b18 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(207, 216, 220, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b18:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 19 */
.bg-color-gradient-transparent-quater-b19 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(47, 53, 66, 0.5) 100%, #2f3542 100%, #222831 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-b19:hover {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(30, 34, 42, 0.5) 100%, #222831 100%, #1a1f29 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 20 */
.bg-color-gradient-transparent-quater-b20 {
  background: linear-gradient(to top, transparent 0%, transparent 25%, rgba(249, 202, 36, 0.5) 100%, #f9ca24 100%, #f39c12 100%);
  color: #fff;
  border: none;
}





/* QUATER TRANSPARENT BOTTOM*/

/* Gradient 1/4 Transparent BOTTOM */



/* Gradient Transparent Quater L1 */
.bg-color-gradient-transparent-quater-t1 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(255, 174, 51, 0.5) 100%, #ffeb3b 100%, #fdd835 100%);
  color: #fff; /* Ensure text remains white */
  border: none; /* Remove any border/frame */
}

.bg-color-gradient-transparent-quater-t1:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(253, 216, 53, 0.5) 100%, #fdd835 100%, #fbc02d 100%);
  color: #fff; /* Prevent text color change */
  border: none;
}

/* Gradient Transparent 2 */
.bg-color-gradient-transparent-quater-t2 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(124, 165, 249, 0.5) 100%, #7ca5f9 100%, #6b8ad9 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t2:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(107, 138, 217, 0.5) 100%, #6b8ad9 100%, #4e6da3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 3 */
.bg-color-gradient-transparent-quater-t3 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(210, 92, 250, 0.5) 100%, #d25cfa 100%, #b64dcb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t3:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(182, 77, 203, 0.5) 100%, #b64dcb 100%, #91419b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 4 */
.bg-color-gradient-transparent-quater-t4 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(89, 227, 148, 0.5) 100%, #59e394 100%, #4bc882 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t4:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(75, 200, 130, 0.5) 100%, #4bc882 100%, #3b9e6a 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 5 */
.bg-color-gradient-transparent-quater-t5 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(177, 199, 217, 0.5) 100%, #b1c7d9 100%, #9aaebf 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t5:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(154, 174, 191, 0.5) 100%, #9aaebf 100%, #798a97 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 6 */
.bg-color-gradient-transparent-quater-t6 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8babea 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t6:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(139, 171, 234, 0.5) 100%, #8babea 100%, #6689d3 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 7 */
.bg-color-gradient-transparent-quater-t7 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #d580eb 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t7:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(213, 128, 235, 0.5) 100%, #d580eb 100%, #ad4bcf 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 8 */
.bg-color-gradient-transparent-quater-t8 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #70e89a 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t8:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(112, 232, 154, 0.5) 100%, #70e89a 100%, #4fc674 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 9 */
.bg-color-gradient-transparent-quater-t9 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(255, 154, 158, 0.5) 100%, #ff9a9e 100%, #f8a0b1 100%);
  color: #fff;
  border: none;
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t9:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(248, 160, 177, 0.5) 100%, #f8a0b1 100%, #f38190 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 10 */
.bg-color-gradient-transparent-quater-t10 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(161, 196, 253, 0.5) 100%, #a1c4fd 100%, #8ebefa 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t10:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(142, 190, 250, 0.5) 100%, #8ebefa 100%, #6b9cd9 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 11 */
.bg-color-gradient-transparent-quater-t11 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(240, 147, 251, 0.5) 100%, #f093fb 100%, #ec74a3 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t11:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(236, 116, 163, 0.5) 100%, #ec74a3 100%, #f06292 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 12 */
.bg-color-gradient-transparent-quater-t12 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(132, 250, 176, 0.5) 100%, #84fab0 100%, #6ee7b7 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t12:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(110, 231, 183, 0.5) 100%, #6ee7b7 100%, #4ad39c 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 13 */
.bg-color-gradient-transparent-quater-t13 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(207, 217, 223, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t13:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 14 */
.bg-color-gradient-transparent-quater-t14 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(79, 172, 254, 0.5) 100%, #4facfe 100%, #329bf6 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t14:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(50, 155, 246, 0.5) 100%, #329bf6 100%, #008ae6 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 15 */
.bg-color-gradient-transparent-quater-t15 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(226, 16, 16, 0.5) 100%, #e21010 100%, #b50d0d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t15:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(181, 13, 13, 0.5) 100%, #b50d0d 100%, #930a0a 100%);
  color: #fff;
  border: none;
}


/* Gradient Transparent 16 */
.bg-color-gradient-transparent-quater-t16 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(245, 98, 98, 0.5) 100%, #f56262 100%, #d03d3d 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t16:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(208, 61, 61, 0.5) 100%, #d03d3d 100%, #a90b0b 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 17 */
.bg-color-gradient-transparent-quater-t17 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(107, 224, 154, 0.5) 100%, #6be09a 100%, #54c47e 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t17:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(84, 196, 126, 0.5) 100%, #54c47e 100%, #3ea658 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 18 */
.bg-color-gradient-transparent-quater-t18 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(207, 216, 220, 0.5) 100%, #cfd9df 100%, #bcc9d4 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t18:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(188, 201, 212, 0.5) 100%, #bcc9d4 100%, #9eb5c4 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 19 */
.bg-color-gradient-transparent-quater-t19 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(47, 53, 66, 0.5) 100%, #2f3542 100%, #222831 100%);
  color: #fff;
  border: none;
}

.bg-color-gradient-transparent-quater-t19:hover {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(30, 34, 42, 0.5) 100%, #222831 100%, #1a1f29 100%);
  color: #fff;
  border: none;
}

/* Gradient Transparent 20 */
.bg-color-gradient-transparent-quater-t20 {
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(249, 202, 36, 0.5) 100%, #f9ca24 100%, #f39c12 100%);
  color: #fff;
  border: none;
}






























/* TEXT COLORS */


  .text-color-red {
    color: #e21010;  /* Richer Red */
}


.text-color-light-red {
    color: #f56262; /* Lighter Red */
}



.text-color-dark-red {
    color: #a90b0b; /* Darker Red */
}


.text-color-lime {
    color: #dfe563;
}


.text-color-dark-orange {
    color: #ff5722;
}


.text-color-light-pink {
    color: #F969BB;
}


.text-color-pink {
    color: #e91e63;
}



.text-color-cyan {
    color: #00bcd4;
}


.text-color-sand {
    color: #f5f5dc;
}



.text-color-brown {
    color: #795548;
}



.text-color-purple {
    color: #9c27b0;
}



.text-color-aqua {
    color: #00ffff;
}



.text-color-khaki {
    color: #f0e68c;
}



.text-color-blue-grey {
    color: #607d8b;
}



.text-color-dark-purple {
    color: #673ab7;
}



.text-color-teal {
    color: #009688;
}



.text-color-yellow {
    color: #ffeb3b;
}



.text-color-light-grey {
    color: #d3d3d3;
}



.text-color-indigo {
    color: #3f51b5;
}



.text-color-green {
    color: #28a745;
}



.text-color-amber {
    color: #ffc107;
}



.text-color-grey {
    color: #9e9e9e;
}



.text-color-blue {
    color: #007bff;
}



.text-color-light-blue {
    color: #6bbcff; /* Lighter Blue */
}



.text-color-dark-blue {
    color: #003daa; /* Darker Blue */
}



.text-color-light-green {
    color: #ace02d;
}



.text-color-orange {
    color: #ff9800;
}



.text-color-dark-grey {
    color: #616161;
}



.text-color-light-teal {
    color: #38d0bc;
}



.text-color-gold {
    color: #d8c099;
}


.text-color-light-black {
    color: #1a1a1a;
}



.text-color-white {
    color: #e5e5e5;
}



.text-color-sky {
    color: #12bbff;
}



.text-color-teal2 {
    color: #1fdede;
}



.text-color-mint {
    color: #04c987;
}


  
  
  




/* LINK COLORS */


.link-color-red {
  color: #e21010;  /* Richer Red */
}

.link-color-red:hover {
  color: #b50d0d;  /* Darker Rich Red */
}

.link-color-light-red {
  color: #f56262; /* Lighter Red */
}

.link-color-light-red:hover {
  color: #d03d3d; /* Darker Hover */
}

.link-color-dark-red {
  color: #a90b0b; /* Darker Red */
}

.link-color-dark-red:hover {
  color: #7a0707; /* Even Darker Hover */
}

.link-color-lime {
  color: #dfe563;
}

.link-color-lime:hover {
  color: #b9bf4a;
}

.link-color-dark-orange {
  color: #ff5722;
}

.link-color-dark-orange:hover {
  color: #e64a19;
}

.link-color-light-pink {
  color: #F969BB;
}

.link-color-light-pink:hover {
  color: #D558A4;  /* Darker version of light pink */
}

.link-color-pink {
  color: #e91e63;
}

.link-color-pink:hover {
  color: #c2185b;
}

.link-color-cyan {
  color: #00bcd4;
}

.link-color-cyan:hover {
  color: #0097a7;
}

.link-color-sand {
  color: #f5f5dc;
}

.link-color-sand:hover {
  color: #e0e0c7;
}

.link-color-brown {
  color: #795548;
}

.link-color-brown:hover {
  color: #5d4037;
}

.link-color-purple {
  color: #9c27b0;
}

.link-color-purple:hover {
  color: #7b1fa2;
}

.link-color-aqua {
  color: #00ffff;
}

.link-color-aqua:hover {
  color: #00e5e5;
}

.link-color-khaki {
  color: #f0e68c;
}

.link-color-khaki:hover {
  color: #d9cd63;
}

.link-color-blue-grey {
  color: #607d8b;
}

.link-color-blue-grey:hover {
  color: #455a64;
}

.link-color-dark-purple {
  color: #673ab7;
}

.link-color-dark-purple:hover {
  color: #512da8;
}

.link-color-teal {
  color: #009688;
}

.link-color-teal:hover {
  color: #00796b;
}

.link-color-yellow {
  color: #ffeb3b;
}

.link-color-yellow:hover {
  color: #fdd835;
}

.link-color-light-grey {
  color: #d3d3d3;
}

.link-color-light-grey:hover {
  color: #bdbdbd;
}

.link-color-indigo {
  color: #3f51b5;
}

.link-color-indigo:hover {
  color: #303f9f;
}

.link-color-green {
  color: #28a745;
}

.link-color-green:hover {
  color: #218838;
}

.link-color-amber {
  color: #ffc107;
}

.link-color-amber:hover {
  color: #ffa000;
}

.link-color-grey {
  color: #9e9e9e;
}

.link-color-grey:hover {
  color: #757575;
}

.link-color-blue {
  color: #007bff;
}

.link-color-blue:hover {
  color: #0056b3;
}

.link-color-light-blue {
  color: #6bbcff; /* Lighter Blue */
}

.link-color-light-blue:hover {
  color: #4a9eff; /* Darker Blue on Hover */
}

.link-color-dark-blue {
  color: #003daa; /* Darker Blue */
}

.link-color-dark-blue:hover {
  color: #00206e; /* Even Darker Blue on Hover */
}

.link-color-light-green {
  color: #ace02d;
}

.link-color-light-green:hover {
  color: #8ab224;
}

.link-color-orange {
  color: #ff9800;
}

.link-color-orange:hover {
  color: #fb8c00;
}

.link-color-dark-grey {
  color: #616161;
}

.link-color-dark-grey:hover {
  color: #424242;
}

.link-color-light-teal {
  color: #38d0bc;
}

.link-color-light-teal:hover {
  color: #17aaba;
}

.link-color-gold {
  color: #d8c099;
}

.link-color-gold:hover {
  color: #9b896f;
}

.link-color-light-black {
  color: #1a1a1a;
}

.link-color-light-black:hover {
  color: #000000;
}

.link-color-white {
  color: #e5e5e5;
}

.link-color-white:hover {
  color: #CCCCCC;
}

.link-color-sky {
  color: #12bbff;
}

.link-color-sky:hover {
  color: #16a9d6;
}

.link-color-teal2 {
  color: #1fdede;
}

.link-color-teal2:hover {
  color: #22c6c1;
}

.link-color-mint {
  color: #04c987;
}

.link-color-mint:hover {
  color: #07ad71;
}