* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    overflow: hidden;
}

.background-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 1s ease-in-out;
    width: 700%; /* 100% * number of images */
}

.slides img {
    width: 100vw; /* Occupy full width */
    height: 100vh; /* Occupy full height */
    object-fit: cover; /* Cover the background */
}

.logo, .info-icon {
    position: absolute;
    z-index: 10;
}

.logo {
    top: 50px;
    left: 50;
    width: 45%; /* Logo occupies 45% of the width */
}

.info-icon {
    top: 45px;
    right: 50px;
    width: 15%; /* Icon occupies 15% of the width */
}

.logo img, .info-icon img {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .logo {
        width: 100%; /* Logo occupies 100% of the width on mobile */
        top: 20px; /* Adjust top position for mobile */
    }
    .info-icon {
        position: absolute;
        bottom: 20px; /* Positionner l'icône en bas sur mobile */
        right: 10px;
        width: 50%; /* Occupation de 50% de la largeur sur mobile */
        top: auto; /* Réinitialiser la position en haut */
    }
}