@font-face {
    font-family: 'SilkRoad';
    src: url('../fonts/silkroad/SilkRoad.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Hoshiko Satsuki';
    src: url('../fonts/hoshiko_satsuki/Hoshiko Satsuki.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --main-color: #a7383c; /* Define el color principal */
    --main-secundary: #311113; 
    --color-title: #cda85e; 
    --color-text: #f6eeef; 
    --header-animation-elements-scale: 0.8;
    --header-animation-cloud-1-scale: 1.4;
    --header-animation-cloud-2-scale: 1.4;
}

h1 {
    font-family: 'Hoshiko Satsuki', sans-serif;
    font-weight: normal;
    text-transform: capitalize;
    position: relative;
}

h1::first-letter {
    font-size: 1.5em;
    font-weight: normal;
}

.navbar-brand {
    height: 60px;
    margin-right: 45px;
    position: relative;
    width: 78px;
}

#logo {
    position: absolute;
    top: -6px;
    left: 0;
    width: 113px;
    z-index: 55;
}


body{
    background-color: var(--main-secundary);
}

.big-title {
    font-size: 2.5em; /* Ajusta el tamaño según tus necesidades */
    line-height: 1em;
    color: var(--color-title); /* Color del texto */
    margin-bottom: 45px;
    position: relative;
}


.big-title-main {
    position: relative;
    display: inline-block;
    font-size: 2em; /* Ajusta el tamaño según tus necesidades */
    color: var(--color-main); /* Color del texto */
}


@keyframes moveBall {
    0% {
        transform: translateY(-50%) translateX(0);
    }
    100% {
        transform: translateY(-50%) translateX(45px);
    }
}

.bg-republic {
    background-color: var(--main-secundary);
    z-index: 5;
    
}

.bg-republic .nav-link{
    color: var(--color-title)!important ;
}

.bg-republic .nav-link:hover{
    color: var(--color-text)!important ;
}
.navbar {
    background: linear-gradient(to bottom, #311113 95%, #6f5133 100%);
    padding-left: 45px;
    padding-right: 45px;
    position: relative;
}

.navbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-image: 
        radial-gradient(circle at 5% 50%, rgba(0, 0, 0, 0.4) 0.5px, transparent 0.5px),
        radial-gradient(circle at 12% 50%, rgba(0, 0, 0, 0.3) 0.5px, transparent 0.5px),
        radial-gradient(circle at 18% 50%, rgba(0, 0, 0, 0.5) 0.5px, transparent 0.5px),
        radial-gradient(circle at 25% 50%, rgba(0, 0, 0, 0.3) 0.5px, transparent 0.5px),
        radial-gradient(circle at 32% 50%, rgba(0, 0, 0, 0.4) 0.5px, transparent 0.5px),
        radial-gradient(circle at 40% 50%, rgba(0, 0, 0, 0.3) 0.5px, transparent 0.5px),
        radial-gradient(circle at 48% 50%, rgba(0, 0, 0, 0.5) 0.5px, transparent 0.5px),
        radial-gradient(circle at 55% 50%, rgba(0, 0, 0, 0.3) 0.5px, transparent 0.5px),
        radial-gradient(circle at 62% 50%, rgba(0, 0, 0, 0.4) 0.5px, transparent 0.5px),
        radial-gradient(circle at 68% 50%, rgba(0, 0, 0, 0.3) 0.5px, transparent 0.5px),
        radial-gradient(circle at 75% 50%, rgba(0, 0, 0, 0.5) 0.5px, transparent 0.5px),
        radial-gradient(circle at 82% 50%, rgba(0, 0, 0, 0.3) 0.5px, transparent 0.5px),
        radial-gradient(circle at 88% 50%, rgba(0, 0, 0, 0.4) 0.5px, transparent 0.5px),
        radial-gradient(circle at 95% 50%, rgba(0, 0, 0, 0.3) 0.5px, transparent 0.5px),
        linear-gradient(to right, 
            #000000 0%, 
            #000000 1%, 
            #cda85e 1.5%, 
            #f0b65a 20%, 
            #ffd700 50%, 
            #f0b65a 80%, 
            #cda85e 98.5%, 
            #000000 99%, 
            #000000 100%);
    background-size: 100% 2px;
    box-shadow: 0 0 4px rgba(205, 168, 94, 0.5),
                0 0 2px rgba(240, 182, 90, 0.3),
                0 1px 0 0 rgba(0, 0, 0, 0.8);
    z-index: 10;
}


.nav-link {
    margin-right: 15px; /* Separación entre los enlaces */
    font-weight: 700; /* Grosor de la fuente */
    text-transform: uppercase; /* Texto en mayúsculas */
    padding-top: 20px; /* Padding arriba */
    padding-bottom: 20px; /* Padding abajo */
    position: relative; /* Necesario para posicionar el pseudo-elemento */
}

.register::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 32px;
    background-color: #9d734c;
    margin-left: 15px;
    margin-right: 0px;
    vertical-align: middle;
}

.hero-content {
    display: flex;
    flex-direction: column; /* Asegura que los elementos hijos se apilen verticalmente */
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra horizontalmente */
    height: 100vh; /* Asegura que el contenedor tome toda la altura de la ventana */
    text-align: center; /* Centra el texto */
}

.hero-content h1 {
    font-size: 3.5em;
    color: var(--color-title);
    margin-bottom: 15px;
}

.hero-content p{
    font-size: 1.5em; /* Ajusta el tamaño según tus necesidades */
    color: var(--color-text); /* Color del texto */
    margin-bottom: 30px; /* Espacio entre el párrafo y los botones */
}

.custom-btn {
    margin: 10px 15px;
    border: 2px solid var(--color-title);
    padding: 11px 53px;
    border-radius: 8px;
    background-color: var(--main-secundary);
    background-image: url(../img/footer/background.webp);
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    color: var(--color-title);
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.custom-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../img/footer/background.webp);
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    border-radius: 8px;
    z-index: -1;
}

.custom-btn:hover {
    margin: 10px 15px;
    border: 2px solid var(--color-title);
    padding: 11px 53px;
    border-radius: 8px;
    background-color: transparent;
    color: var(--color-text);
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
}

.separator {
    align-items: center; /* Centra verticalmente la imagen dentro del separador */
    margin: 10px 0; /* Añade margen arriba y abajo del separador */
}

.separator img {
    height: 60PX; /* Ajusta la altura de la imagen según sea necesario */
    width: auto; /* Mantiene la proporción de la imagen */
}

.online-users {
    padding: 3px 30px;
    border: 2px solid #311113;
    border-radius: 5px;
    background-color: #311113c2;
    font-size: 1.2em;
    display: flex;
    align-items: center;
}

.online-users .online-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}

#online-count{
    color: #0bf241;
    font-size: 1.875rem;
}

.open-beta-countdown {
    margin-top: 20px;
    padding: 15px 30px;
    border: 2px solid var(--color-title);
    border-radius: 5px;
    background: linear-gradient(135deg, var(--main-secundary) 0%, rgba(167, 56, 60, 0.3) 100%);
    text-align: center;
    display: none; /* Oculto por defecto, se mostrará si hay tiempo restante */
}

.open-beta-countdown.show {
    display: block;
}

.countdown-title {
    color: var(--color-title);
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-family: 'Hoshiko Satsuki', sans-serif;
    letter-spacing: 2px;
}

.countdown-timer {
    color: var(--color-text);
    font-size: 2rem;
    font-weight: bold;
    font-family: 'SilkRoad', monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.countdown-timer span {
    background-color: rgba(205, 168, 94, 0.2);
    padding: 5px 10px;
    border-radius: 4px;
    min-width: 50px;
    display: inline-block;
    text-align: center;
}

.discord::before,
.facebook::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 5px;
    vertical-align: middle;
    background-size: cover;
    background-repeat: no-repeat;
}

.discord, .facebook{
    margin-right: 0;
    margin-left: 2px;
}



/* Estilos para la nueva sección */
.hero-section {
    background-image: url(../img/hero/bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    min-height: 750px;
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.hero-logo {
    width: 350px;
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    display: block;
}


.discord::before {
    background-image: url('../img/social/discord.png');
}

.facebook::before {
    background-image: url('../img/social/facebook.png');
}


.new-slider img {
    width: 100%;
    height: auto;
}

.list-group-item {
    font-size: 1.2em;
    padding: 15px;
}

.news-section {
    position: relative; /* Necesario para el pseudo-elemento */
    padding-top: 80px;
    padding-bottom: 80px;
    background-image: url('../img/slider/bg.jpg'); /* Ruta de la imagen de fondo */
    background-size: cover;
    z-index: 1; /* Asegura que el contenido esté por encima del pseudo-elemento */
}

.news-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #311113de; /* Capa negra con 50% de opacidad */
    z-index: -1; /* Asegura que la capa esté detrás del contenido */
}

/* Estilos para posicionar los dots */
.slick-dots {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex !important;
    justify-content: flex-end;
}

.slick-dots li {
    margin: 0 5px;
}

.slick-dots li button:before {
    font-size: 12px;
    color: #fff; /* Cambia el color según tus necesidades */
}

/* Estilos para la lista de noticias */
.list-group-item {
    background-color: transparent; /* Remover fondo */
    color: #311113; /* Color del texto */
    padding: 10px 15px; /* Reducir espacio entre arriba y abajo */
    border: none; /* Remover bordes */
    transition: background-color 0.3s ease, color 0.3s ease; /* Efecto de transición */
}

.list-group-item:hover {
    color: #3111136b; /* Color de texto al pasar el mouse */
}

/* Fondo claro para elementos impares */
.list-group-item:nth-child(odd) {
    background-color: rgba(240, 182, 90, 0.2); /* Fondo claro */
}

/* Fondo oscuro para elementos pares */
.list-group-item:nth-child(even) {
    background-color: rgba(240, 182, 90, 0.5); /* Fondo oscuro */
}

.list-group-item::before {
    content: '\f0a9'; /* Código Unicode del ícono de Font Awesome */
    font-family: 'Font Awesome 5 Free'; /* Familia de fuentes de Font Awesome */
    font-weight: 900; /* Peso de la fuente para íconos sólidos */
    margin-right: 10px; /* Espacio entre el ícono y el texto */
    color: #311113; /* Color del ícono */
}

/* Estilos para la columna de noticias */
.news-column {
    background-color: rgba(240, 182, 90, 0.8); /* Color de fondo con opacidad */
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

/* Asegura que las columnas tengan la misma altura */
.news-section .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch; /* Asegura que ambas columnas se estiren a la misma altura */
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
    .news-section .row {
        flex-direction: column; /* Cambia a columna en pantallas pequeñas */
    }

    .news-column {
        margin-top: 15px; /* Añade margen superior en pantallas pequeñas */
    }
}

.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.ranking-section {
    background-color: var(--main-secundary);
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
}

.ranking-section::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px; /* Altura de la imagen de nube */
    background: url('../img/shared/clouds-2.png') no-repeat bottom center;
    background-size: cover;
    opacity: 0.2;
    animation: moveClouds 30s linear infinite;
}

@keyframes moveClouds {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}

.table-highlight {
    background-color: rgba(240, 182, 90, 0.5); /* Color de fondo diferente para la primera fila */
}

.table img.rounded-circle {
    width: 30px;
    height: 30px;
}

.ranking-section .nav-tabs .nav-item.show .nav-link, 
.ranking-section .nav-tabs .nav-link.active {
    color: var(--color-text);
    background-color: var(--main-secundary);
    background-image: url(../img/footer/background.webp);
    background-size: cover;
    background-position: center;
    border: 3px solid var(--color-title);
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    position: relative;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 -2px 8px rgba(205, 168, 94, 0.4);
}

.ranking-section .nav-tabs .nav-link.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../img/footer/background.webp);
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    border-radius: 8px 8px 0 0;
    z-index: -1;
}

.ranking-section .nav-link {
    display: block;
    padding: .5rem 1rem;
    color: var(--color-title);
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    background-color: var(--main-secundary);
    background-image: url(../img/footer/background.webp);
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(205, 168, 94, 0.3);
    border-bottom: 1px solid rgba(205, 168, 94, 0.3);
    border-radius: 8px 8px 0 0;
    margin-right: 5px;
    position: relative;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.6;
}

.ranking-section .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../img/footer/background.webp);
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    border-radius: 8px 8px 0 0;
    z-index: -1;
}

.ranking-section .nav-link:focus, 
.ranking-section .nav-link:hover {
    color: var(--color-text);
    background-color: transparent;
}

.ranking-section .nav-tabs .nav-link:focus, 
.ranking-section .nav-tabs .nav-link:hover {
    border-color: var(--color-title);
    isolation: isolate;
}

.ranking-section .nav-tabs {
    border-bottom: 2px solid var(--color-title);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #cb774b;
    background-color: var(--color-title);
    border-color: var(--color-title) --color-title --color-title;
}

.nav-link {
    display: block;
    padding: .5rem 1rem;
    color: var(--color-title);
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.nav-link:focus, .nav-link:hover {
    color: #b65142;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: #e9ecef00 #e9ecef00 #dee2e600;
    isolation: isolate;
}

.nav-tabs {
    border-bottom: 1px solid var(--color-title);
}


/* NUBES*/


.header__animation {
    height: 64rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
    display: block;
}
.header__animation-left {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.3;
}
.header__tree {
    position: absolute;
    top: 0;
    opacity: 0;
    background-color: transparent;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
}
.header__tree_1_left {
    background-image: url(../img/hero/left_tree_1.png);
    width: 26.5rem;
    width: calc(33.125rem*var(--header-animation-elements-scale));
    height: 22.3rem;
    height: calc(27.875rem*var(--header-animation-elements-scale));
    top: -3.125rem;
    left: -3.125rem;
    opacity: 1;
    -webkit-animation: header__tree_1_left 25s ease-in-out infinite;
    animation: header__tree_1_left 25s ease-in-out infinite;
    transform-origin: top left;
    z-index: 3;
}
@-webkit-keyframes header__tree_1_left {
    0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(20deg);
}
to {
    transform: rotate(0deg);
}
}@keyframes header__tree_1_left {
    0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(20deg);
}
to {
    transform: rotate(0deg);
}
}.header__tree_2_left {
    background-image: url(../img/hero/left_tree_2.png);
    width: 22.45rem;
    width: calc(28.0625rem*var(--header-animation-elements-scale));
    height: 11.15rem;
    height: calc(13.9375rem*var(--header-animation-elements-scale));
    opacity: 0.4;
    top: -3.125rem;
    left: -3.125rem;
    -webkit-animation: header__tree_2_left 20s ease-in-out infinite;
    animation: header__tree_2_left 20s ease-in-out infinite;
    transform-origin: top left;
    z-index: 2;
}
@-webkit-keyframes header__tree_2_left {
    0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(10deg);
}
to {
    transform: rotate(0deg);
}
}@keyframes header__tree_2_left {
    0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(10deg);
}
to {
    transform: rotate(0deg);
}
}.header__tree_3_left {
    background-image: url(../img/hero/left_tree_3.png);
    width: 21.2rem;
    width: calc(26.5rem*var(--header-animation-elements-scale));
    height: 23.35rem;
    height: calc(29.1875rem*var(--header-animation-elements-scale));
    opacity: 1;
    top: 12.5rem;
    left: -3.125rem;
    -webkit-animation: header__tree_3_left 10s ease-in-out infinite;
    animation: header__tree_3_left 10s ease-in-out infinite;
    transform-origin: top left;
    z-index: 1;
}
@-webkit-keyframes header__tree_3_left {
    0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(20deg);
}
to {
    transform: rotate(0deg);
}
}@keyframes header__tree_3_left {
    0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(20deg);
}
to {
    transform: rotate(0deg);
}
}.header__animation-right {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    opacity: 0.3;
}
.header__tree_1_right {
    background-image: url(../img/hero/right_tree_1.png);
    width: 26.85rem;
    width: calc(33.5625rem*var(--header-animation-elements-scale));
    height: 22.2rem;
    height: calc(27.75rem*var(--header-animation-elements-scale));
    opacity: 1;
    top: -3.125rem;
    right: -3.125rem;
    -webkit-animation: header__tree_1_right 25s ease-in-out infinite;
    animation: header__tree_1_right 25s ease-in-out infinite;
    transform-origin: top right;
    z-index: 1;
}
@-webkit-keyframes header__tree_1_right {
    0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(20deg);
}
to {
    transform: rotate(0deg);
}
}@keyframes header__tree_1_right {
    0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(20deg);
}
to {
    transform: rotate(0deg);
}
}.header__tree_2_right {
    background-image: url(../img/hero/right_tree_2.png);
    width: 19rem;
    width: calc(23.75rem*var(--header-animation-elements-scale));
    height: 54.4rem;
    height: calc(68rem*var(--header-animation-elements-scale));
    opacity: 1;
    top: -3.125rem;
    right: -3.125rem;
    -webkit-animation: header__tree_2_right 20s ease-in-out infinite;
    animation: header__tree_2_right 20s ease-in-out infinite;
    transform-origin: top right;
    z-index: 3;
}
@-webkit-keyframes header__tree_2_right {
    0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(10deg);
}
to {
    transform: rotate(0deg);
}
}@keyframes header__tree_2_right {
    0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(10deg);
}
to {
    transform: rotate(0deg);
}
}.header__tree_3_right {
    background-image: url(../img/hero/right_tree_3.png);
    width: 22.8rem;
    width: calc(28.5rem*var(--header-animation-elements-scale));
    height: 11.6rem;
    height: calc(14.5rem*var(--header-animation-elements-scale));
    opacity: 1;
    top: 12.5rem;
    right: -3.125rem;
    -webkit-animation: header__tree_3_right 10s ease-in-out infinite;
    animation: header__tree_3_right 10s ease-in-out infinite;
    transform-origin: top right;
    z-index: 2;
}
@-webkit-keyframes header__tree_3_right {
    0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(20deg);
}
to {
    transform: rotate(0deg);
}
}@keyframes header__tree_3_right {
    0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(20deg);
}
to {
    transform: rotate(0deg);
}
}.header__animation-center {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.header__cloud {
    position: absolute;
    top: -18.75rem;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 0 0;
    background-color: transparent;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
}
.header__cloud_1 {
    background-image: url(../img/hero/cloud_circle_big.webp);
    width: 190.2rem;
    width: calc(158.5rem*var(--header-animation-cloud-1-scale));
    height: 175.725rem;
    height: calc(146.4375rem*var(--header-animation-cloud-1-scale));
    -webkit-animation: cloud-rotate 150s linear infinite;
    animation: cloud-rotate 150s linear infinite;
    opacity: .1;
}
.header__cloud_2 {
    background-image: url(../img/hero/cloud_circle_small.webp);
    width: 204.4rem;
    width: calc(146rem*var(--header-animation-cloud-2-scale));
    height: 188.825rem;
    height: calc(134.875rem*var(--header-animation-cloud-2-scale));
    -webkit-animation: cloud-rotate 360s linear infinite;
    animation: cloud-rotate 360s linear infinite;
    opacity: .1;
}
@-webkit-keyframes cloud-rotate {
    0% {
    transform: rotate(0deg) translate(-50%, -50%);
}
to {
    transform: rotate(1turn) translate(-50%, -50%);
}
}@keyframes cloud-rotate {
    0% {
    transform: rotate(0deg) translate(-50%, -50%);
}
to {
    transform: rotate(1turn) translate(-50%, -50%);
}
}.header__char {
    background-color: transparent;
    background-image: url(../img/hero/char.png);
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    display: block;
    width: 52.5rem;
    height: 48.0625rem;
    position: absolute;
    top: 5.625rem;
    left: calc(50% + 19.75rem);
    transform: translateX(-50%);
    -webkit-animation: header__char 10s ease-in-out infinite;
    animation: header__char 10s ease-in-out infinite;
}
@-webkit-keyframes header__char {
    0% {
    transform: rotate(0deg) scale(1) translateX(-50%);
}
50% {
    transform: rotate(.02deg) scale(1.02) translateX(-50%);
}
to {
    transform: rotate(0deg) scale(1) translateX(-50%);
}
}@keyframes header__char {
    0% {
    transform: rotate(0deg) scale(1) translateX(-50%);
}
50% {
    transform: rotate(.02deg) scale(1.02) translateX(-50%);
}
to {
    transform: rotate(0deg) scale(1) translateX(-50%);
}
}.header__parallax-cursor {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    pointer-events: none;
    display: block;
}
.header__leaves {
    background-color: transparent;
    background-image: url(../img/hero/leaves.png);
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 68.25rem;
    height: 35.625rem;
    position: absolute;
    left: calc(50% - 46.875rem)!important;
    top: 10.625rem!important;
    z-index: 5;
    pointer-events: none!important;
    display: block;
}
.header__leaves[data-parallax] {
    top: -.625rem;
}
.header__leaves_2 {
    background-image: url(../img/hero/leaves-2.png);
    width: 88.375rem;
    height: 46.125rem;
    left: calc(50% - 40.75rem)!important;
}
.header__leaves_2[data-parallax] {
    top: -7.8125rem!important;
}

.table-dark {
    --bs-table-bg: #300f11;
    --bs-table-striped-bg: #371719;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: #fff;
    border-color: #373b3e;
    z-index: 2;
}


.gallery-section {
    padding: 80px 0; /* Añade padding arriba y abajo */
    background-image: url(../img/gallery/bg.jpg);
    text-align: center;
    background-size: cover;
    background-blend-mode: overlay;
    z-index: 1;
}

.gallery-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #311113de; /* Capa negra con 50% de opacidad */
    z-index: -1; /* Asegura que la capa esté detrás del contenido */
}

.gallery-section h2 {
    font-size: 3em; /* Ajusta el tamaño según tus necesidades */
    color: var(--color-title); /* Color del texto */
    font-weight: 900;

}

.gallery-section p{
    font-size: 1.5em; /* Ajusta el tamaño según tus necesidades */
    color: var(--color-text); /* Color del texto */
    margin-bottom: 30px; /* Espacio entre el párrafo y los botones */
    margin-bottom: 55px;
}


.gallery-section .col-md-3 {
    margin-bottom: 30px; /* Añade margen inferior a las columnas */
}

.gallery-section img {
    border: 2px solid #ddd; /* Añade un borde a las imágenes */
    border-radius: 5px; /* Añade bordes redondeados a las imágenes */
    transition: transform 0.3s; /* Añade una transición para el efecto hover */
}

.gallery-section img:hover {
    transform: scale(1.05); /* Escala la imagen al pasar el ratón por encima */
}

.social-media-section {
    padding: 80px 0; /* Añade padding arriba y abajo */
    text-align: center;
    background-color: var(--main-secundary); /* Color de fondo */
 
    background-position: bottom center;
}

.social-media-section h2 {
    font-size: 2.5em; /* Ajusta el tamaño según tus necesidades */
    color: var(--color-title); /* Color del texto */
    margin-bottom: 30px; /* Añade margen inferior */
    font-weight: 900;
    text-transform: uppercase;
}

.follow-us-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.inline-title {
    margin-bottom: 0;
    display: inline-block;
}

.separator-pipe {
    color: var(--color-title);
    font-size: 2em;
    font-weight: bold;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 30px; /* Espacio entre los íconos */
}

.social-icon {
    font-size: 3em; /* Tamaño de los íconos */
    color: #000; /* Color de los íconos */
    transition: color 0.3s; /* Transición para el efecto hover */
}

.social-icon.discord::before, .social-icon.facebook::before {
    width: 45px;
    height: 45px;
}

.social-icon:hover {
    color: #007bff; /* Color al pasar el ratón por encima */
}

.footer-section {
    padding: 60px 0; /* Añade padding arriba y abajo */
    background-color: var(--main-secundary); /* Color de fondo */
    text-align: center; /* Centra el contenido */
    position: relative;
    border-top: 2px solid var(--color-title);
    overflow: hidden;
}

.footer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../img/footer/background.webp);
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}

.footer-section > .container {
    position: relative;
    z-index: 1;
}

.footer-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: url('../img/shared/clouds-2.png') no-repeat bottom center;
    background-size: cover;
    opacity: 0.2;
    animation: moveClouds 30s linear infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes waterDrops {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-10px);
        opacity: 0.8;
    }
}

.footer-logo {
    max-width: 250px; /* Ajusta el tamaño del logo */
    margin-bottom: 20px; /* Añade margen inferior */
}

.footer-links {
    margin-bottom: 20px; /* Añade margen inferior */
}

.footer-links a {
    margin: 0 25px; /* Añade margen a los lados de los enlaces */
    color: var(--color-title); /* Color de los enlaces */
    text-decoration: none; /* Quita el subrayado */
    font-weight: 700; /* Grosor de la fuente */
    transition: color 0.3s; /* Transición para el efecto hover */
    position: relative; /* Necesario para el pseudo-elemento */
    font-size: 1em;
    text-transform: uppercase;
}

.footer-links a::after {
    content: '|'; /* Contenido del separador */
    color: var(--color-title); /* Color del separador */
    margin-left: 15px; /* Espacio a la izquierda del separador */
    position: absolute; /* Posiciona el separador */
    right: -20px; /* Ajusta la posición del separador */
}

.footer-links a:last-child::after {
    content: ''; /* Elimina el separador del último enlace */
}

.footer-links a:hover {
    color: var(--color-text); /* Color al pasar el ratón por encima */
}

.footer-separator {
    width: 80%;
    height: auto;
    margin: 20px auto; /* Centra el separador y añade margen */
    text-align: center;
}

.footer-text {
    color: var(--color-title); /* Color del texto */
    font-size: 1em; /* Tamaño de la fuente */
    font-weight: 700; /* Grosor de la fuente igual al header */
    text-transform: uppercase; /* Texto en mayúsculas como el header */
    margin-top: 45px;
}

.custom-section {
    min-height: 350px; /* Altura mínima de la sección */
    background-image: url(../img/hero/bg.jpg);
    background-size: cover; /* Asegura que la imagen cubra todo el fondo */
    background-position: center; /* Centra la imagen de fondo */
    display: flex; /* Utiliza Flexbox para centrar el contenido */
    align-items: center; /* Centra verticalmente el contenido */
    position: relative;
    z-index: -1;
}

span.char {
    position: absolute;
    right: 10%;
    top: -43%;
    z-index: 1;
}

span.char img{
    width: 100%;
    z-index: 0!important;
}


.section-title {
    color: var(--color-title); /* Color del texto */
    font-size: 3em; /* Tamaño de la fuente */
    margin: 0; /* Elimina el margen por defecto */
    text-transform: uppercase;
   
}

.download-section {
    padding: 60px 0; /* Añade padding arriba y abajo */
    position: relative; /* o absolute */
    z-index: 10; /* Un valor mayor que el de la imagen */ 
    background-color: var(--main-secundary);
}

.download-box {
    text-align: center;
    padding: 20px;
    background-color: #3f191b;
    border: 1px solid #3f191b;
    border-radius: 9px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.download-box h3{
    color: var(--color-title);
}

.download-box p{
    color: white
}

.download-box img {
    max-width: 90px; /* Asegura que la imagen no exceda el ancho de la caja */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-bottom: 15px; /* Añade margen inferior */
}


.system-requirements-section {
    padding: 60px 0; /* Añade padding arriba y abajo */
}

.system-requirements-section .section-title {
    font-size: 2.5em; /* Tamaño de la fuente del título */
    margin-bottom: 20px; /* Añade margen inferior */
    text-align: center; /* Centra el título */
}

.system-requirements-section p {
    text-align: center; /* Centra el texto */
    margin-bottom: 40px; /* Añade margen inferior */
    color: var(--color-title);
}

.system-requirements-section .table {
    width: 100%; /* Asegura que la tabla ocupe todo el ancho del contenedor */
    margin-bottom: 0; /* Elimina el margen inferior */
    background-color: var(--color-title); /* Color de fondo de la tabla */
    border-collapse: collapse; /* Colapsa los bordes de la tabla */
}

.system-requirements-section .table th,
.system-requirements-section .table td {
    padding: 15px; /* Añade padding a las celdas */
    border: 1px solid var(--color-title); /* Añade un borde a las celdas */
    text-align: left; /* Alinea el texto a la izquierda */
}

.system-requirements-section .table th {
    background-color: var(--color-title); /* Color de fondo de los encabezados */
    font-weight: bold; /* Grosor de la fuente de los encabezados */
}

.system-requirements-section .table tbody tr:nth-child(even) {
    background-color: var(--color-title); /* Color de fondo de las filas pares */
}

.register-section {
    padding: 60px 0; /* Adds padding top and bottom */
    position: relative;
   overflow: hidden;

}

.register-section .form-label {
    font-weight: bold; /* Bold font for labels */
    color: #fff; /* Label color for dark mode */
}

.register-section .form-control {
    background-color: #33333342;
    color: #fff;
    border: 1px solid #55555585;
}

.register-section .form-control:focus {
    background-color: #33333342; /* Background color for input fields on focus */
    border-color: #33333342; /* Border color for input fields on focus */
}

.register-section .form-select {
    background-color: #33333342;
    color: #fff;
    border: 1px solid #555 !important;
    position: relative !important;
    padding-left: 2.5em !important;
}

.register-section .form-select:focus {
    background-color: #444; /* Background color for select fields on focus */
    border-color: #777; /* Border color for select fields on focus */
}

.register-section .form-select option {
    background-color: #333; /* Background color for options */
    color: #fff; /* Text color for options */
}

.register-section .form-select option[data-flag]::before {
    content: attr(data-flag);
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5em;
    height: 1em;
    background-size: cover;
    background-repeat: no-repeat;
}

img.img-flag {
    width: 22px;
}


.select2-search {
    background-color: #343A40!important;
}
    /* Change the appearence of the search input field */
    .select2-search input {
        color: #ffffff!important;
        background-color: #343A40 !important;
    }

/* Change the appearence of the search results container */
.select2-results {
    background-color: #343A40 !important;
}

/* Change the appearence of the dropdown select container */
.select2-container--bootstrap-5 .select2-selection {
    border-color: #6c757d !important;
    color: #ffffff !important;
    background-color: #343A40 !important;
}

/* Change the caret down arrow symbol to white */
.select2-container--bootstrap-5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Change the color of the default selected item i.e. the first option */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff;
    line-height: 35px;
    background-color: #311113f7;
}

.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 35px;
    user-select: none;
    -webkit-user-select: none;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #cda85e;
    color: #311113;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #311113;
    color: #cda85e;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #311113;
    color: #cda85e;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #311113d4;
    border-radius: 2px;
}


.animated-images {
    position: relative;
    width: 800px; /* Ajusta el tamaño según sea necesario */
    height: 800px; /* Ajusta el tamaño según sea necesario */
}
.animated-images img {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: fade 4s infinite; /* Ajusta la duración de la animación */
}

.animated-images img:nth-child(1) {
    animation-delay: 0s;
}

.animated-images img:nth-child(2) {
    animation-delay: 0.8s; /* Ajusta el retraso de la animación */
}

.animated-images img:nth-child(3) {
    animation-delay: 1.6s; /* Ajusta el retraso de la animación */
}

.animated-images img:nth-child(4) {
    animation-delay: 2.4s; /* Ajusta el retraso de la animación */
}

.animated-images img:nth-child(5) {
    animation-delay: 3.2s; /* Ajusta el retraso de la animación */
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    40% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.features-section {
    padding: 80px 0;
}

.features-section .col-md-3 {
    margin-bottom: 20px;
}

.feature-item {
    background-color: #462727; /* Fondo oscuro */
    padding: 25px;
    margin: 15px 10px; /* Añadir margen horizontal para separar los divs */
    border-radius: 8px;
    transition: background-color 0.3s;
}

.feature-item a {
    color: #fff; /* Color del texto */
    text-decoration: none;
}

.feature-item a:hover {
    color: var(--color-title); /* Color del texto al pasar el ratón */
}

.feature-item:hover {
    background-color: var(--main-secundary); /* Fondo más claro al pasar el ratón */
    border: 2px solid var(--color-title);
}

.feature-item i {
    color: #fff; /* Color del icono */
    margin-bottom: 10px;
}

.feature-item h3 {
    font-size: 1.5em;
    color: #fff; /* Color del texto */
}

.profile-container {
    padding: 20px;
    background-color: #462727;
    border-radius: 8px;
    margin-top: 15px;
    color: var(--color-text);
}

.profile-container h2 {
    margin-bottom: 20px;
}

.profile-container .table {
    margin-bottom: 20px;
}

.profile-container .list-group-item a {
    text-decoration: none;
    color: #311113;
}

.profile-container .list-group-item::before {
    content: '';
}

.profile-container .list-group-item a:hover {
    color: var(--main-secundary);
    font-weight: 900; /* Color del enlace al pasar el ratón */
}

.profile-container .list-group-item i {
    margin-right: 10px; /* Espacio entre el icono y el texto */
}

.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: .9rem 0;
    margin: 0;
    font-size: 1rem;
    color: #684331 !important;
    text-align: left;
    list-style: none;
    background-color: #462727;
    background-clip: padding-box;
    border: 2px solid rgb(118 85 54);
    border-radius: .75rem;
    top: 58px !important;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #9b6e40;
    background-color: #311113;
    font-weight: 800;
    text-transform: uppercase;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .5rem 1rem;
    clear: both;
    font-weight: 800;
    color: #9b6e40;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    text-transform: uppercase;
}

.form-row {
    margin-bottom: 20px;
}
#card-element {
    background-color: #1e1e1e;
    padding: 10px;
    border-radius: 4px;
}
#card-errors {
    color: #ff6b6b;
}

.box-donations {
    padding: 0 15%;
    text-align: left;
}

.box-donations label{
    font-weight: 600;
    color: var(--color-text);
}

#card-element, #amount {
    background-color: #1e1e1e;
    color: #ffffff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #444;
}
#card-element::placeholder, #amount::placeholder {
    color: #aab7c4;
}
#card-errors {
    color: #ff6b6b;
}

#payment-form input#phone {
    background-color: #1e1e1e;
    color: #ffffff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #444;
    /* background: red; */
    border: 8px;
    /* padding: 15px; */
    width: 100%;
    border: 1px solid #eeeeee57;
}

.icon {
    margin-right: 10px; /* Espacio entre el icono y el nombre */
}

.tooltip-custom {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 200px;
}
.item-icon {
    position: relative;
}

.box-icon {
    justify-content: center;
    position: relative;
    display: inline-block;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
}

.invetory-items{
    text-align: center;
    padding: 15px;
    border: 1px solid #252525;
}

p.no-margin-botton{
    margin-bottom: 0px!important;
}

.box-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 15px;
}


.custom-tooltip .tooltip-inner{
    min-width: 200px;
    text-align: left!important;
    width: 220px;
    background: rgba(18, 18, 19, 0.85)!important;
    border: 2px solid #303d4d;
    line-height: 18px;
    font-size: 10px;
    color: #fff;
    padding: 10px;
}


.real-name {
    line-height: 18px;
    font-size: 10px;
    font-size: 0.8rem;
    color: #f2e43d;
    font-weight: bold;
}

.real-name::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('../img/icon/com_itemsign.png');
    background-size: cover;
    margin-right: 5px; /* Espacio entre la imagen y el texto */
    vertical-align: middle; /* Alinea verticalmente la imagen con el texto */
}

.real-name-sox{
    line-height: 18px;
    font-size: 0.8rem;
    color: #f2e43d;
    font-weight: bold;
}

ul.stats-list{
    margin-bottom: 25px!important;
}

.stats-list li{
    color: white;
    line-height: 12px;
    font-size: 10px;
}

.item-details{
    color: #efdaa4;
    font-size: 9px;
    padding-top: 0!important;
    margin-bottom: 35px!important;
}
span.item-details p{
    margin-bottom: 0px!important;

}

span.char-blues p{
    margin-bottom: 0px!important;
    color: #50cecd;
    font-weight: 600;
    font-size: 11px;
}

a.url-ranking{
    color: var(--color-title);
    font-weight: 600;
    text-decoration: none;
}

a.url-ranking:hover{
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
}

.thread-section {
    padding: 40px 0;
    position: relative;
    z-index: 2;
    background-color: var(--main-secundary);
}

.thread-section img {
    width: 100%;
    height: auto;
    display: block;
}

/* Challenge Section */
.challenge-heading {
    margin-bottom: 30px;
}

.challenge-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 2.5em;
    color: var(--color-title);
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
}

.challenge-fire-icon {
    width: 30px;
    height: auto;
}

.challenge-subtitle {
    color: var(--color-text);
    font-size: 1.2em;
    margin: 0;
}

.challenge-name img {
    position: absolute;
    top: 0;
    left: -23px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    width: 45px;
    height: 44px;
    z-index: -1;
}

.challenge-coupon {
    background-image: url('../img/beta/coupon-bg.png');
    background-size: cover;
    background-position: center;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    position: relative;
}

.coupon-content {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.coupon-text {
    color: var(--color-text);
    font-size: 1.1em;
}

.coupon-accent {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: rgba(0, 255, 10, 0.2);
    padding: 3px 19px;
    border-radius: 5px;
    border: 2px solid var(--color-title);
    font-size: 15px;
    font-weight: 800;
    color: #d3c4be;
}

.coupon-item-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.coupon-accent span {
    color: var(--color-title);
    font-weight: 700;
}

.challenge-about {
    margin-bottom: 30px;
}

.challenge-desc {
    color: var(--color-text);
    font-size: 1em;
    margin-bottom: 15px;
    line-height: 1.6;
}

.color-green {
    color: #00ff0a;
}

.color-accent {
    color: var(--color-title);
    font-weight: 700;
}

.challenge-btns {
    margin-top: 20px;
}

.challenge-btn {
    font-size: 1em;
    padding: 12px 30px;
    text-transform: uppercase;
    margin: 0 !important;
}

.challenge-btn:hover {
    margin: 0 !important;
    padding: 12px 30px !important;
    font-size: 1em !important;
    border: 2px solid var(--color-title) !important;
    border-radius: 8px !important;
}

/* Beta Items Section */
.beta-items-container {
    position: relative;
    background-color: rgb(73 63 64 / 99%);
    background-image: url(../img/beta/box-pic.png);
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    padding: 25px;
    min-height: 400px;
    border-radius: 8px;
    margin-left: 20px;
}

.beta-dec-top {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.beta-items-title {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--color-title);
    margin-bottom: 25px;
    font-size: 2em;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 2px;
}

.beta-pin-icon {
    width: 24px;
    height: auto;
}

.beta-boards-list {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    align-items: center;
}

.beta-board {
    position: relative;
    width: 85%;
}

.beta-board-img {
    width: 100%;
    height: auto;
    display: block;
}

.beta-board-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-text);
    font-weight: 700;
    font-size: 0.85em;
    text-transform: uppercase;
    text-align: center;
    z-index: 4;
    white-space: nowrap;
}

/* AI System Details */
.ai-system-details {
    background-color: rgba(49, 17, 19, 0.6);
    padding: 30px;
    border-radius: 8px;
    border: 2px solid var(--color-title);
}

.ai-system-details h3 {
    color: var(--color-title);
    font-size: 2em;
    font-weight: 700;
    text-transform: uppercase;
}

.ai-feature-item {
    padding: 15px;
    background-color: rgba(205, 168, 94, 0.1);
    border-radius: 5px;
    border-left: 3px solid var(--color-title);
    transition: all 0.3s ease;
}

.ai-feature-item:hover {
    background-color: rgba(205, 168, 94, 0.2);
    transform: translateX(5px);
}

.ai-feature-item h4 {
    color: var(--color-title);
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 10px;
}

.ai-feature-item h4 i {
    margin-right: 10px;
    color: var(--color-title);
}

.ai-feature-item p {
    color: var(--color-text);
    font-size: 0.95em;
    line-height: 1.6;
    margin: 0;
}