/* --- Floating Navigation Arrows --- */
.page-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%); /* Keeps it vertically centered */
  z-index: 1000;
  width: 60px;
  height: 60px;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 64px;
  font-weight: 100;
  font-stretch: ultra-condensed;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
    /* Remove the tap highlight color for mobile */
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.page-nav:hover {
  color: rgba(255, 255, 255, 1);
}

.page-nav:active {
    background-color: transparent;
}

.page-nav.prev {
  left: -15px;
}

.page-nav.next {
  right: -15px;
}
.page-nav.disabled {
  display: none; /* Hide disabled arrows if not needed */
}

 /* --- Page Transition Animations (Applied to Content Wrapper) --- */
 #page-content-wrapper {
  width: 100%;
  min-height: 100vh;
  
    -webkit-animation: fadein 1.0s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1.0s; /* Firefox < 16 */
        -ms-animation: fadein 1.0s; /* Internet Explorer */
         -o-animation: fadein 1.0s; /* Opera < 12.1 */
            animation: fadein 1.0s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
 
 /* Prevent horizontal scrollbars during slide */
 html,
 body {
  overflow-x: hidden;
 }