.navigation-arrows {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999; /* Ensure it's above other content */
  
  transition: opacity 0.5s ease; /* adjust the duration and timing function as needed */
  opacity: 0;
}

.navigation-arrows.visible {
  opacity: 1;
}

.nav-arrow {
  font-size: 24px; /* Adjust size as needed */
  color: #EF700C; /* or any color you prefer */
  text-decoration: none;
  position: fixed;
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust for exact vertical center */
}

.nav-arrow:hover {
  color: #555555;
}

.nav-icon {
  display: inline-block;
  width: 2em;
  height: 1.5em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.left-arrow {
  left: 50px; /* Distance from left edge */
}

.right-arrow {
  right: 50px; /* Distance from right edge */
}


.navigation-buttons {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}



/* Hide desktop navigation on mobile */
@media screen and (max-width: 991.98px) {
  .back-to-top {
    display: none !important;
  }

  .navigation-arrows.desktop-only {
      display: none;
  }

  .navigation-arrows.mobile-only {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #F5F5F5DE; /* Your preferred background */
      padding: 30px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1000; /* Adjust as needed */
  }

  .nav-arrow-small {
    font-size: 24px; /* Adjust size as needed */
    color: #EF700C; /* or any color you prefer */
    text-decoration: none;
    position: fixed;
    transform: translateY(-50%); /* Adjust for exact vertical center */
  }

  .left-arrow {
    margin-top: 35px;
  }

  .right-arrow {
    margin-top: 35px;
  }

  /* Adjust the bottom padding of the main content to prevent overlap */
  /* Assume your main content class is .main-content and the navigation bar is 50px in height */
  .main-content {
      padding-bottom: 50px; /* Adjust based on the actual height of your navigation bar */
  }
}

/* Hide desktop navigation on iPad */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  .back-to-top {
    display: none !important;
  }

  .navigation-arrows.desktop-only {
      display: none;
  }

  .navigation-arrows.mobile-only {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #F5F5F5DE; /* Your preferred background */
      padding: 30px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1000; /* Adjust as needed */
  }

  .nav-arrow-small {
    font-size: 24px; /* Adjust size as needed */
    color: #EF700C; /* or any color you prefer */
    text-decoration: none;
    position: fixed;
    transform: translateY(-50%); /* Adjust for exact vertical center */
  }

  .nav-arrow-small:hover {
    color: #555555;
  }

  .left-arrow {
    margin-top: 35px;
  }

  .right-arrow {
    margin-top: 35px;
  }

  /* Adjust the bottom padding of the main content to prevent overlap */
  /* Assume your main content class is .main-content and the navigation bar is 50px in height */
  .main-content {
      padding-bottom: 50px; /* Adjust based on the actual height of your navigation bar */
  }
}

/* Hide desktop navigation on laptop */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  .back-to-top {
    display: none !important;
  }
  
  .navigation-arrows.desktop-only {
      display: none;
  }

  .navigation-arrows.mobile-only {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #F5F5F5DE; /* Your preferred background */
      padding: 30px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1000; /* Adjust as needed */
  }

  .nav-arrow-small {
    font-size: 24px; /* Adjust size as needed */
    color: #EF700C; /* or any color you prefer */
    text-decoration: none;
    position: fixed;
    transform: translateY(-50%); /* Adjust for exact vertical center */
  }

  .left-arrow {
    margin-top: 35px;
  }

  .right-arrow {
    margin-top: 35px;
  }

  /* Adjust the bottom padding of the main content to prevent overlap */
  /* Assume your main content class is .main-content and the navigation bar is 50px in height */
  .main-content {
      padding-bottom: 50px; /* Adjust based on the actual height of your navigation bar */
  }
}

/* Hide desktop navigation on iPad Pro */
@media only screen and (width: 1024px) and (height: 1366px) and (-webkit-device-pixel-ratio: 2) {
  .back-to-top {
    display: none !important;
  }

  .navigation-arrows.desktop-only {
      display: none;
  }

  .navigation-arrows.mobile-only {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #F5F5F5DE; /* Your preferred background */
      padding: 30px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1000; /* Adjust as needed */
  }

  .nav-arrow-small {
    font-size: 24px; /* Adjust size as needed */
    color: #EF700C; /* or any color you prefer */
    text-decoration: none;
    position: fixed;
    transform: translateY(-50%); /* Adjust for exact vertical center */
  }

  .left-arrow {
    margin-top: 35px;
  }

  .right-arrow {
    margin-top: 35px;
  }

  /* Adjust the bottom padding of the main content to prevent overlap */
  /* Assume your main content class is .main-content and the navigation bar is 50px in height */
  .main-content {
      padding-bottom: 50px; /* Adjust based on the actual height of your navigation bar */
  }
}