:root {
  --color-main: #ff1a1a;
  --color-main-light: #ff4d4d; /*For gradient background*/
  --color-main-dark: #990000; /*For gradient background*/
  --color-accent: #1a0000;

  --color-discord: #5865f2;
  --color-discord-light: #8791f6;

  --color-text-primary: #ffffff;
  --color-text-secondary: #b3b3b3;

  --color-red: #ff1a1a;
  --color-red-dark: #800000;

  --color-green: #22c55e;
  --color-green-dark: #16a34a;

  --color-blue: #38bdf8;
  --color-blue-dark: #3b82f6;

  --color-top-donator: #1a0000;
  --color-top-donator-dark: #0a0000;
  --color-text-top-donator: #ff4d4d;
  
  --bg-0: #050505;
  --bg-1: #0d0d0d; 
  --bg-2: #1a1a1a; 
  
  --logo-height: 185px;
  --header-image: url(https://i.ibb.co/5X6jpnZr/b14fdcaf61220083b1d4cef4d5a1d1c1.webp);
  --header-image-height: 486px;
  --header-image-opacity: 0.2;
  --header-image-blur: 6px;
  
  --bg-error: 
}

body {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-height: 400px;
z-index: -1;
background: var(--bg-image) center center/cover no-repeat;
mask-image: linear-gradient(rgba(0, 0, 0, 0.9) 50%, rgba(0, 0, 0, 0.3));
pointer-events: none;
}

.transition-all {
  transition-duration: 300ms !important;
}

.header-splash {
  background: var(--header-image) no-repeat 50% /cover;
  height: 99%;
  opacity: var(--header-image-opacity);
  filter: blur(var(--header-image-blur));
}

.header-splash-gradient-overlay {
  background: linear-gradient(90deg, #000000, #1a0000 25%, #330000 50%, #1a0000 75%, #000000);
  height: var(--header-image-height);
}

.header-splash-gray-overlay {
  background: linear-gradient(180deg, #00000080, var(--bg-2));
  height: var(--header-image-height);
}

.my-text-main {
  color: var(--color-main);
}

.my-text-primary {
  color: var(--color-text-primary);
}

.my-text-primary-hover:hover {
  color: var(--color-text-primary) !important;
}

.my-text-secondary {
  color: var(--color-text-secondary);
}

.bg-1 {
  background-color: var(--bg-1);
}

.bg-2 {
  background-color: var(--bg-2);
}

.discord-bg {
  background: linear-gradient(90deg, var(--color-discord), var(--color-discord-light));
}

.main-bg {
  background: linear-gradient(90deg, var(--color-main-dark), var(--color-main));
}

.red-bg {
  background: linear-gradient(85.06deg, var(--color-red), var(--color-red-dark));
}

.green-bg {
  background: linear-gradient(85.06deg, var(--color-green), var(--color-green-dark));
}

.blue-bg {
  background: linear-gradient(85.06deg, var(--color-blue), var(--color-blue-dark));
}

.tooltip::before {
  background-color: var(--bg-2);
  color: var(--color-text-primary);
  border: 1px solid #330000;
}

.my-drop-shadow {
  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.7)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.5)) !important;
}

.sliderm__pagination[data-active="true"] {
  border-color: var(--color-main) !important;
}

.store-menu::before, .store-menu::after {
background-color: var(--color-main);
}

/* WIDGET */
.widget {
  border-color: #330000;
  background: var(--bg-1);
}

/* PROGRESS */
.widget-goal .my-progress-bar {
  background: linear-gradient(90deg, #990000, #ff1a1a);
}

/* TOP DONATOR */
.widget-top-donator {
  background: linear-gradient(90deg, #0a0000, #1a0000);
}

/* POPUPS */
.popup, .modal::backdrop {
  backdrop-filter: blur(16px);
  background-color: rgba(0,0,0,0.6) !important;
}

/* PRODUCT */
.store-product-full {
  border: 1px solid #330000 !important;
}

/* BOTONES */
.btn-primary {
  background: linear-gradient(90deg, #990000, #ff1a1a);
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(90deg, #ff1a1a, #ff4d4d);
  box-shadow: 0 0 10px #ff1a1a;
}

/* SCROLL */
::-webkit-scrollbar-thumb {
  background: #990000;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff1a1a;
}

/* BENEFICIOS */

.cat-description-text ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cat-description-text li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    line-height: 1.8 !important;
    margin-bottom: 10px !important;
}

.cat-description-text li img {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    margin-top: 6px !important;
    flex-shrink: 0 !important;

    position: static !important;
    vertical-align: unset !important;
}