.scroll-container {
   display: flex;
   flex-direction: row;
   width: calc(100vw - var(--nav-width));
   height: 100vh;
   overflow-x: scroll;
   overflow-y: hidden;
   scrollbar-width: none;
   margin-left: var(--nav-width);
}

.scroll-container::-webkit-scrollbar {
   display: none;
}

.section {
   flex: 0 0 var(--section-width);
   width: var(--section-width);
   height: var(--section-height);
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 100px 100px 100px 10px;
}

.section-label {
   writing-mode: vertical-rl;
   transform: rotate(180deg);
   font-size: 54px;
   font-weight: 400;
   color: transparent;
   -webkit-text-stroke: 3px var(--color-main);
   white-space: nowrap;
   letter-spacing: 0;
   line-height: 1.2;
   align-self: center;
   flex-shrink: 0;
}

@keyframes arrow-pulse {
   0%,
   70%,
   100% {
      scale: 1;
      filter: none;
   }
   85% {
      scale: 1.18;
      filter: drop-shadow(0 0 10px var(--color-main));
   }
}

.arrow-btn {
   position: absolute;
   right: 48px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
   display: flex;
   align-items: center;
   transition: transform 0.2s;
   animation: arrow-pulse 3.5s ease-in-out infinite;
}

.arrow-container {
   width: 0;
   height: 100vh;
   position: relative;
}

.arrow-icon {
   width: 112px;
   height: 37px;
   background-color: var(--color-main);
   mask-image: url("../assets/img/buttons/Arrow_Next.svg");
   mask-size: contain;
   mask-repeat: no-repeat;
   mask-position: center;
   -webkit-mask-image: url("../assets/img/buttons/Arrow_Next.svg");
   -webkit-mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center;
}

.arrow-btn:hover {
   transform: translateY(-50%) translateX(12px);
   filter: drop-shadow(0 0 8px var(--color-main));
   animation: none;
}

.arrow-btn--hero {
   top: 410px;
}
.arrow-btn--why-me {
   top: calc(100% - 124px);
}
.arrow-btn--skills {
   top: calc(50% - 90px);
}
.arrow-btn--work {
   top: calc(100% - 118px);
}
.arrow-btn--references {
   top: 357px;
}