/* styles.css */

body {
    font-family: 'Times New Roman', Times, serif;
    background-color: #FBB867;
    color: #6c2121;
    text-align: center;
    font-weight: bold;
    margin: 0;
    padding: 0;
    background-image: url('images/harry-potter-marauders-map-wallpaper-scaled.jpg'); /* Reemplaza 'pazoFondo.jpg' con la ruta de tu imagen de fondo */
    background-size: cover; /* La imagen se ajusta al tamaño del contenido de la página */
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top; /* Centra la imagen de fondo */
}

.container {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    width: 88%;
    margin: auto;
    margin-top: 30px;
}

h1 {
    font-size: 36px;
    margin-top: 0;
    color: #ba4a4a;
}

#countdown {
    font-size: 48px;
    margin-top: 50px;
    color: #ba4a4a;
}

/* Custom CSS for additional spacing between WhatsApp images */
.whatsapp-img {
    margin-bottom: 10px; /* Adjust the value as needed */
}

/* Estilo para las tarjetas */
.card {
    background-color: rgba(192, 192, 192, 0.5); /* Gris transparente */
    margin-bottom: 20px; /* Separación entre tarjetas */
}

@media (max-width: 767px) {
    /* Estilos específicos para dispositivos móviles */
    .card {
        margin-bottom: 30px; /* Aumenta la separación entre tarjetas en dispositivos móviles */
    }
}

/* Estilos para el título general */
h3 {
    text-align: center;
}

/* Estilos para los subtítulos */
h4 {
    text-align: center;
    margin-bottom: 10px;
}

/* Carousel Container */
.carousel-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  
  /* Carousel Item */
  .carousel-item {
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
    position: relative;
  }
  
  /* Carousel Image */
  .carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .note {
    font-size: 0.875rem;
    color: #777;
    margin-top: 5px;
  }

  .icon {
    color: #555; /* Asegura que los iconos dentro de enlaces tengan el mismo color */
  }