/* NAVIGATION SLIDER */

.quick-navigation-slider {
    position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  font-family: "HelveticaNeue", sans-serif!important;
  }
  .slider-wrapper {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: none;
    padding: 10px;
    -webkit-overflow-scrolling: touch!important; /* Native glidende scrolling på iOS */
  }
  
  .slider-wrapper::-webkit-scrollbar {
    display: none!important; /* Skjul scrollbar for bedre UX */
  }  

  .custom-nav-text {
    text-align: center;
    margin-top: 10px; /* Juster afstanden mellem billede og tekst */
  }


  .quick-navigation-slider .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none; /* Fjern understregning på link */
    color: #000; /* Farve på teksten */
}

.quick-navigation-slider .nav-item img {
    display: block;
}

.quick-navigation-slider .nav-item .nav-text {
    margin-top: 0px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}
.quick-navigation-slider .nav-item .nav-text2 {
  display: block;
  font-size: 10px; /* Juster skriftstørrelse */
  line-height: 1.2; /* Juster linjeafstand */
  color: #eb4d3d; /* Standard tekstfarve */
}

.nav-item {
    flex: 0 0 auto;
    width: 122px;
    height: auto;
    padding: 10px;
    text-align: center;
    border-radius: 15px;
    transition: transform 0.6s ease, box-shadow 0.6s ease!important;
    -webkit-transition: transform 0.6s ease, box-shadow 0.6s ease!important;
    scroll-snap-align: start!important; /* Sikrer at hvert item snapper til skærmen */
}
  
  .nav-item img {
    width: 100%;
    height: auto;
    margin:0px;
  }
  
.nav-item:hover,
.nav-item:focus {
  transform: none;
  box-shadow: none;
  outline: none;
}

  /*
  .nav-item:focus {
    outline: 1px solid #007aff;
  } */

  /* Arrow buttons */
  .slider-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 20px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
  }
  
  .slider-arrow:hover {
    background-color: rgba(0, 0, 0, 0.7);
  }
  
  .left-arrow {
    left: 10px;
  }
  
  .right-arrow {
    right: 10px;
  }
  
  @media (min-width: 768px) {
    .slider-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nav-item:hover,
    .nav-item:focus {
      transform: scale(1.1);
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.20);
      outline: 1px solid #4639E1;
    }
    .slider-wrapper {
      display: flex;
      gap: 30px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding: 25px;
      -webkit-overflow-scrolling: touch!important; /* Native glidende scrolling på iOS */
    }
}
  

  /* END */


/* Carousel looping container */
#carousel {
    display: flex;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

/* Track for the carousel */
#carousel .carousel-track{
    display: flex;
    animation: scroll 25s linear infinite;
    width: max-content; /* Ensures the track's width adjusts to fit all items */
}

/* Individual items */
#carousel .carousel-item {
    flex: 0 0 auto;
    max-width: 200px;
    margin: 0 100px;
}

#carousel .carousel-item img {
    width: 100%;
    border-radius: 15px;
    margin:0px;
}

/* Hover effect to pause animation */
#carousel:hover .carousel-track {
    animation-play-state: paused;
}

/* Infinite scrolling animation */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Responsiveness */
@media screen and (max-width: 768px) {
    #carousel .carousel-item {
        max-width: 200px;
        margin: 0 70px;
    }
    /* Track for the carousel */
#carousel .carousel-track{
    display: flex;
    animation: scroll 12s linear infinite;
    width: max-content; /* Ensures the track's width adjusts to fit all items */
}
}

@media screen and (max-width: 480px) {
    #carousel .carousel-item {
        max-width: 175px;
        margin: 0 40px;
    }
    /* Track for the carousel */
#carousel .carousel-track{
    display: flex;
    animation: scroll 7s linear infinite;
    width: max-content; /* Ensures the track's width adjusts to fit all items */
}
}