/* Conteneur principal */
.floating-stars {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.6);
}

/* Étoiles qui défilent */
.star {
    position: absolute;
    color: orange;
    opacity: 0;
    text-shadow: 0 0 15px rgba(255, 165, 0, 0.4);
    animation: starTravel 8s linear infinite;
    z-index: -1;
}

.star::after {
    content: '★';
    display: block;
}

/* Positions des étoiles qui défilent */
.star1 { top: 5%; right: 10%; font-size: 25px; animation-delay: 0s; }
.star2 { top: 15%; right: 20%; font-size: 40px; animation-delay: 1s; }
.star3 { top: 25%; right: 15%; font-size: 35px; animation-delay: 2s; }
.star4 { top: 10%; right: 25%; font-size: 20px; animation-delay: 3s; }
.star5 { top: 20%; right: 30%; font-size: 30px; animation-delay: 4s; }
.star6 { top: 8%; right: 18%; font-size: 28px; animation-delay: 0.5s; }
.star7 { top: 22%; right: 22%; font-size: 32px; animation-delay: 1.5s; }
.star8 { top: 12%; right: 28%; font-size: 22px; animation-delay: 2.5s; }
.star9 { top: 18%; right: 12%; font-size: 38px; animation-delay: 3.5s; }
.star10 { top: 6%; right: 35%; font-size: 26px; animation-delay: 4.5s; }
.star11 { top: 28%; right: 8%; font-size: 24px; animation-delay: 5s; }
.star12 { top: 16%; right: 40%; font-size: 36px; animation-delay: 5.5s; }
.star13 { top: 4%; right: 45%; font-size: 28px; animation-delay: 6s; }

@keyframes starTravel {
    0% {
        transform: translate3d(0, -50px, 0) scale(0.1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate3d(-2000px, 1000px, -500px) scale(2);
        opacity: 0;
    }
}
     h1 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 2em;
        }

        .offers-container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
            width: 100%;
            max-width: 1200px;
        }

        .offer {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            flex: 1 1 calc(25% - 40px); /* Adjust for spacing */
            min-width: 300px;
        }

        .offer p {
            margin: 15px 0;
            line-height: 1.8;
            font-size: 1.2em;
        }

        @media (max-width: 768px) {
            .offer {
                flex: 1 1 calc(50% - 40px);
            }
        }

        @media (max-width: 480px) {
            .offer {
                flex: 1 1 100%;
            }
        }