/* Add the following styles to your button */
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%
}

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


/* Position the image container (needed to position the left and right arrows) */
.slideshow-container {
  position: relative;
  padding: 2rem 1rem;
  width: 100%;
  max-width: var(--dl-size-size-maxcontent);
  background-color: var(--green-opaque);
  text-align: left;
  justify-self: center;
}

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

.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-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 */
}

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

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

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

.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) {
  .slide img{
    /* inset: auto; */
    margin-left: -12%;
  }
 }

 .btn {
  position: absolute;
  top: 40%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn:hover {
  transform: scale(1.2); /* Slightly enlarge the button on hover */
}

/* Left arrow */
.btn-prev {
  left: 1%;
  transform: translateX(20%);
}

.btn-prev::before {
  content: '';
  display: block;
  border-left: 50px solid transparent;
  border-right: 70px solid;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent; 
  color: var(--engbakken-trans-high);
}

.btn-prev:hover::before {
  color: var(--logo-color); 
}

/* Right arrow */
.btn-next {
  right: 1%;
  transform: translateX(-20%); /* Vertically center */
}

.btn-next::before {
  content: '';
  display: block;
  border-left: 70px solid;
  border-right: 50px solid transparent;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent; /* White arrow pointing downwards */
  color: var(--engbakken-trans-high);
}

.btn-next:hover::before {
  color: var(--logo-color); /* Change color to yellow on hover */
}



/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

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

/* Add the following styles to your button */
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: 2rem
}


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 */
}


button.button.product-button: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: 12px;
  margin-bottom: 1rem;
}


#caption {
  transition: 0.5;
  display: inline-block;
  font-weight: 400;
  color: white

}

.slide-image-text {
  opacity: 0;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.slideshow-container .column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.slideshow-container .demo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem;
  opacity: 0.6;
}

.slideshow-container .active {
  opacity: 1;
  text-align: center;

}


.slideshow-container .demo:hover {
  opacity: 1;
}



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