/* ===============================
   SCROLL INDICATOR CONTAINER
================================ */

.gs-scroll-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;

  opacity: 1;
  pointer-events: auto;

  will-change: transform, opacity;
}


/* ===============================
   SVG DO INDICADOR
================================ */

.scroll-indicator-svg {
  width: 60px;
  height: auto;
  display: block;
}


/* ===============================
   SETAS
================================ */

.scroll-arrow {
  stroke-width: 3;
  fill: none;

  transform-box: fill-box;
  transform-origin: center;

  will-change: transform, opacity;
}


/* seta superior */

.arrow-top {
  stroke: #ffffff;
}


/* seta do meio */

.arrow-mid {
  stroke: #ffffff;
}


/* seta inferior (destacada) */

.arrow-bottom {
  stroke: #009bdb;
}


/* ===============================
   TEXTO DO INDICADOR
================================ */

.scroll-indicator-text {

  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
  opacity: 0.9;
  transition: opacity 0.3s ease;
  white-space: nowrap; /* impede quebra de linha */
}


/* ===============================
   RESPONSIVO
================================ */

@media (max-width: 768px) {

  .scroll-indicator-svg {
    width: 48px;
  }

  .scroll-indicator-text {
    font-size: 12px;
  }

}


@media (max-width: 480px) {

  .scroll-indicator-svg {
    width: 42px;
  }

  /* opcional: esconder texto em mobile */
  /* .scroll-indicator-text { display:none; } */

}