@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap');

@font-face {
    font-family: "Helvetica Black";
    src: url("../fonts/helvetica black.woff2") format("woff2"),  /* Format moderne */
         url("../fonts/helvetica black.woff") format("woff"),    /* Bonne compatibilité */
         url("../fonts/helvetica black.ttf") format("truetype"), /* Ancien format */
         url("../fonts/helvetica black.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
} 

@font-face {
    font-family: "MADE Soulmaze";
    src: url("../fonts/MADE-Soulmaze.woff2") format("woff2"),  
         url("../fonts/MADE-Soulmaze.woff") format("woff"),    
         url("../fonts/MADE-Soulmaze.ttf") format("truetype"), 
         url("../fonts/MADE-Soulmaze.otf") format("opentype"); 
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0px;
    background-color: rgb(0, 0, 0);
    height: auto;
}

.scroll-indicator {
    position: fixed;
    bottom: 15px; /* Espace depuis le bas de l'écran */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
    color: white; /* adapte selon ton fond */
    font-size: 1.2rem;
    font-weight: 500;
    pointer-events: none; /* évite de bloquer les clics */
}

.scroll-indicator p {
    margin: 0;
}

/* Animation rebond sur l'image */
.scroll-indicator img {
    width: 70px; /* ajuste selon la taille de ton image */
    height: auto;
    animation: bounce 1.5s infinite;
    opacity: 0.6;
}

/* Animation rebond */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(6px);
    }
}

.scroll-indicator {
    transition: opacity 0.5s ease;
}
.scroll-indicator img {
    transition: opacity 0.5s ease;
}


@media (min-width: 2550px) and (max-width : 2800px){
    .scroll-indicator {
      bottom: 26.6px;
      font-size: 1.6rem;
    }
  
    .scroll-indicator img {
      width: 32px;
    }
  }

@media (min-width: 1526px) and (max-width: 1909px){
.scroll-indicator {
    bottom: 16px;
    font-size: 0.96rem;
}

.scroll-indicator img {
    width: 50px;
}
}

@media (min-width: 1440px) and (max-width: 1525px){
.scroll-indicator {
    bottom: 15.2px;
    font-size: 0.91rem;
}

.scroll-indicator img {
    width: 50px;
}
}

@media (min-width: 1356px) and (max-width: 1439px){
.scroll-indicator {
    bottom: 14.2px;
    font-size: 0.85rem;
}

.scroll-indicator img {
    width: 40px;
}
}

@media (min-width: 1270px) and (max-width: 1355px){
.scroll-indicator {
    bottom: 13.2px;
    font-size: 0.79rem;
}

.scroll-indicator img {
    width: 40px;
}
}

@media (min-width: 1014px) and (max-width: 1269px){
.scroll-indicator {
    bottom: 10.6px;
    font-size: 0.64rem;
}

.scroll-indicator img {
    width: 40px;
}
}

@media (min-width: 758px) and (max-width: 1013px){
.scroll-indicator {
    bottom: 8px;
    font-size: 0.48rem;
}

.scroll-indicator img {
    width: 40px;
}
}