.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 80px;
}

.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;
}

.arrow-btn {
   position: absolute;
   right: 40px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
   display: flex;
   align-items: center;
   transition: transform 0.2s;
}

.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(8px);
   filter: drop-shadow(0 0 8px var(--color-main));
}

.arrow-btn--hero {
   top: 20%;
}
.arrow-btn--why-me {
   top: 70%;
}
.arrow-btn--skills {
   top: 50%;
}
.arrow-btn--work {
   top: 80%;
}
.arrow-btn--references {
   top: 30%;
}