.container {
    background: rgba(255, 255, 255, 0.1); /* Más transparencia */
    backdrop-filter: blur(15px); /* Mayor desenfoque */
    -webkit-backdrop-filter: blur(15px);
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0.2); /* Borde más oscuro para contraste */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); /* Sombra más marcada */
    padding: 20px;
  }
  
  footer {
    background: linear-gradient(135deg, #1b1b2f, #162447, #0f3460); /* Mismo degradado que el body */
    color: white; /* Texto en blanco para buena legibilidad */
    padding: 20px;
    border: none; /* Asegúrate de que no haya bordes claros */
  }
         
        
        
        /* Tarjetas de Cosplays */
        body {
            background-color: #1c1c1c;
            background: linear-gradient(135deg, #1b1b2f, #162447, #0f3460); /* Púrpura oscuro a azul medianoche */

        }
        .cosplay-card {
            border: none;
            border-radius: 15px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .cosplay-card img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            transition: transform 0.3s ease-in-out;
        }

        .cosplay-card:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .cosplay-card:hover img {
            transform: scale(1.1);
        }

        /* Título dentro de la imagen */
        .cosplay-card .card-body {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.5); /* Fondo negro semitransparente */
            padding: 10px;
            text-align: center;
        }

        .cosplay-card h2 {
            font-size: 1.2rem;
            color: white;
            margin: 0;
        }

        /* Mantener el tamaño de las tarjetas */
        .cosplay-card {
            height: 375px;
            position: relative;
        }

        .cosplay-card img {
            width: 100%;
            height: 100%;
        }

        /* Tarjetas más largas en móviles */
        @media (max-width: 768px) {
            .cosplay-card {
                height: 300px; /* Aumentar la altura en la versión móvil */
            }
        }
        /* Sticky sidebar */
        .sticky-sidebar {
            position: -webkit-sticky;
            position: sticky;
            top: 20px; /* Se pegará cuando llegues a 20px desde la parte superior */
        }
        /* Sección de publicidad */
.ad-space { 
    margin-bottom: 20px;
    background-color: #f8f9fa;
    text-align: center;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;

    /* Nuevas propiedades para centrar y ajustar el ancho */
    width: 100%; /* Ajusta el contenedor a su 100% de ancho */
    max-width: 300px; /* Controla el ancho máximo */
    margin-left: auto;
    margin-right: auto; /* Centra el contenedor en su espacio padre */
    overflow: hidden; /* Evita que el contenido desborde */
    box-sizing: border-box; /* Asegura que padding y borde se incluyan en las dimensiones */
}






    /* Centrando el título y las imágenes */
            .text-center {
                text-align: center;
                color: #f8f9fa;
            }
    
            .image-container {
                display: flex;
                flex-direction: column;
                align-items: center; /* Centrar las imágenes */
                margin-bottom: 20px;
            }
    
            .image-container img {
                max-width: 100%;
                margin: 0 auto 15px;
            }
    
            /* Justificar el texto del párrafo */
            .justified-text {
                text-align: justify;
                color:#f8f9fa;
            }
            
            
            
            
            
            .glass-effect {
    background: rgba(255, 255, 255, 0.1); /* Fondo semitransparente */
    backdrop-filter: blur(10px); /* Efecto de difuminado */
    border-radius: 10px; /* Bordes redondeados */
    padding: 20px;
    color: #fff; /* Color del texto */
    font-size: 2rem; /* Tamaño del texto */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Sombra del texto para mejor visibilidad */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para un toque más estilizado */
  }
  
  
  
  
  /* Estilo para la navbar */
.row {
  padding-top: 10px; /* Ajuste adicional si lo necesitas */
}
/* Estilo para la navbar con efecto Glass */
.navbar-custom {
  background: rgba(255, 255, 255, 0.1); /* Fondo translúcido */
  backdrop-filter: blur(8px); /* Desenfoque en el fondo */
  padding: 12px 30px; /* Espaciado más pequeño */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  border-radius: 15px; /* Bordes redondeados */
  position: relative;
  z-index: 10;
  transition: background 0.4s ease-in-out; /* Transición suave */
}

.navbar-custom:hover {
  background: rgba(255, 255, 255, 0.2); /* Fondo más opaco al pasar el cursor */
}

/* Estilo para el logo */
.navbar-brand {
  font-size: 1.9rem; /* Tamaño moderado */
  font-weight: 700; /* Resaltar el texto */
  color: #fff;
  letter-spacing: 1px; /* Espaciado entre letras */
  text-transform: uppercase; /* Convertir a mayúsculas */
  transition: color 0.4s ease-in-out; /* Transición de color */
}

.navbar-brand:hover {
  color: #ffde00; /* Color al pasar el cursor */
}

/* Estilo para el buscador */
.input-group {
  width: 250px; /* Reducir ancho */
  border-radius: 50px; /* Bordes redondeados */
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

.form-control {
  border-radius: 50px 0 0 50px; /* Bordes redondeados en el lado izquierdo */
  padding: 10px 20px; /* Relleno ajustado */
  font-size: 1rem; /* Reducir tamaño de fuente */
  border: 2px solid #e0e0e0; /* Borde suave */
  transition: all 0.3s ease; /* Transición en enfoque */
}

.form-control:focus {
  border-color: #ffde00; /* Borde amarillo al enfocar */
  box-shadow: 0 0 8px rgba(255, 222, 0, 0.5); /* Sombra en enfoque */
  outline: none;
}

.btn-search {
  border-radius: 0 50px 50px 0; /* Bordes redondeados solo a la derecha */
  background-color: #ffde00; /* Color amarillo */
  border: none;
  padding: 10px 18px; /* Relleno más pequeño */
  color: #4a00e0; /* Color del texto */
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
}

.btn-search:hover {
  background-color: #a550ff; /* Cambio de color a morado al pasar el cursor */
  color: #fff; /* Texto blanco */
  transform: scale(1.1); /* Efecto de escalado */
}

.bi-search {
  font-size: 1.3rem; /* Icono más pequeño */
  transition: transform 0.3s ease; /* Transición en la rotación del icono */
}

.btn-search:hover .bi-search {
  transform: rotate(180deg); /* Rotación del icono al pasar el cursor */
}

  

/* Cosplay Random */
.glass-container {
  background: rgba(255, 255, 255, 0.1); /* Fondo semi-transparente */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px); /* Efecto blur para el glassmorphism */
  padding-top: 1px; /* Espacio superior reducido */
  padding-bottom: 1px; /* Espacio inferior reducido */
}




/* Boton Scroll */

.button {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 40px;
  right: 40px;
  border-radius: 50%;
  background-color: rgb(20, 20, 20);
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
  cursor: pointer;
  transition-duration: 0.3s;
  overflow: hidden;
  z-index: 100;
}

.svgIcon {
  width: 12px;
  transition-duration: 0.3s;
}

.svgIcon path {
  fill: white;
}


@media (max-width: 768px) {
  .button {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }

  .svgIcon {
    width: 10px;
  }


}

.sticky-sidebar{
     background: rgba(255, 255, 255, 0.1); /* Fondo translúcido */
  backdrop-filter: blur(8px); /* Desenfoque en el fondo */
}