/* Position the image container (needed to position the left and right arrows) */
#case-carrusel {
  width: 100%;
}

.slideshow-container {
  justify-self: center;
  padding: 2em 10px;
  width: 100%;
  max-width: var(--dl-size-size-maxcontent);
  background-color: var(--green-opaque);
  text-align: left;
}

.slideshow-container u {
  position: relative;
  color: var(--engbakken-color);
}

.slideshow-container .slideshow-heading {
  font-size: 1.5rem;
  margin-left: 2%; /* Remove extra margin */
  color: var(--engbakken-color);
  padding-bottom: 12px; /* Space between heading and subheading */
  display: block; /* Make sure it's on a new line */
}

.slideshow-container .slideshow-subheading {
  font-size: 1.1rem;
  margin-left: 2%; /* Remove extra margin */
  padding-bottom: 12px; /* Space between subheading and button */
  display: block; /* Make sure it's on a new line */
}

.slideshow-container .slider {
  width: 100%;
  max-width: var(--dl-size-size-maxcontent);
  height: 350px;
  position: relative;
  overflow: hidden;
  padding-top:1rem;  
  /* border-radius: 15px; */
  /* display: block; */
}

.slideshow-container .slide {
  width: 50%;
  max-width: 100%;
  height: 350px;
  position: absolute;
  transition: all 1s;
}

.slideshow-container .slide-neighbors{
  filter: blur(3px) brightness(0.5);
  justify-content: center;
  /* margin: 5px; */
  scale: 80%;
  z-index: -1;
}

.slideshow-container .slide-image-text {
  display: none;
}

.slideshow-container .slide img {
  width: 100%;
  min-width: 350px;
  height: 100%;
  object-fit: cover;
  padding: 0 1rem;
}

/* Container for image text */
.img-caption-container {
  text-align: left;
  padding-left: 5%;
  padding-right: 40%;
  display: block;
  margin-left: 10%;  /* font-size: 20px; */
}

@media (max-width: 500px) {
  .slideshow-container .slide img{
    /* inset: auto; */
    margin-left: -12%;
  }
 }

.slideshow-container .btn {
  position: absolute;
  top: 50%;
  width: 6rem;
  height: 8rem;
  background-color: var(--engbakken-trans-high);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform-origin: center;
}

.slideshow-container .btn:hover {
  background-color: var(--logo-color);
}

/* Venstre pil */
.slideshow-container .btn-prev {
  left: 5rem;
  transform: translateY(-50%) scaleX(-1); /* Spejl trekant */
  transform-origin: center;
}

.slideshow-container .btn-prev:hover {
  left: 4rem;
  transform: translateY(-50%) scaleX(-1) scale(1.2); /* Skaler uden at spejle dobbelt */
}

/* Højre pil */
.slideshow-container .btn-next {
  right: 5rem;
  transform: translateY(-50%);
  transform-origin: center;
}

.slideshow-container .btn-next:hover {
  right: 4rem;
  transform: translateY(-50%) scale(1.2);
}

/* Add the following styles to your button */
.slideshow-container button.button.product-button-cases {
  background-color: var(--engbakken-color);  /* You can change the background color */
  color: white;                 /* Text color */
  border: none;                 /* Remove border */
  padding: 12px 30px;           /* Padding (top-bottom, left-right) */
  font-size: 16px;              /* Font size */
  cursor: pointer;             /* Pointer cursor on hover */
  border-radius: 50px;          /* Rounded edges, making it capsule-like */
  transition: transform 0.3s;   /* Smooth transition for hover effect */
  text-align: center;           /* Center text inside */
  margin-left: 2%
}

.slideshow-container button.button.product-button-cases:hover {
  background-color: var(--logo-color); /* Darken the background on hover */
  transform: skew(-10deg) scale(1.1);  /* Slightly enlarge the button on hover */
}

.case-button {
  position: relative;
  margin-top: 2rem;
  margin-bottom: 1rem;
}