/* Reset default button */
button.popupButton:focus, 
button.popupButton:hover{
  color: #1B323E;
    background-color: transparent;
    text-decoration: none;
}
button.popupButton:focus{
  outline: none;
}

button.popupButton {
  border: none;
  position: relative;
  text-decoration: none; /* Remove default underline */
  padding: 0px;
}

button.popupButton::before{
content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #1B323E; /* Adjust color as needed */

  transition: width 0.3s ease-in-out;
}

button.popupButton:hover::before {
  width: 100%; /* Expand the width to 100% on hover */

}
  .mySwiper2{
  margin-left: 15px;
}
.referencie {
  filter: drop-shadow(0px 0px 15px rgba(159, 0, 6, 0.1));
  background-color: white;
  border-radius: 0 0 20px 20px;
  height: 455px;
  margin: 50px 0px;
}

.referencie img {
  border-radius: 20px 20px 0 0;
  height: 280px;
  object-fit: cover;
}

.ref-slider-content {
  height: 195px;
  padding: 15px 15px;
}

.ref-slider {
  margin: 50px 50px;
}

.ref-title {
  color: #1B323E;
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-size: 23.9301px;

}

.ref-slider-content p {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
}

.ref-tag-wrapper {
  position: absolute;
  bottom: 164px;
  left: 5px;
}

.ref-tag {
  background-color: white;
  color: #231F20;
  font-size: 12px;
  font-weight: 400;
  margin-right: 5px;
  padding: 2px 10px;
  border-radius: 150px;

}

.ref-link {
  height: auto !important;
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-size: 14.54px;
  line-height: 20px;
  padding-top: 15px;
  /* or 137% */


  color: #231F20;
}

a.ref-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

a.ref-link::after {

  position: absolute;
  left: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: #231F20;
  bottom: -4px;
  transform: scale(0, 1);
  transition: transform 0.3s;
  transform-origin: left top;
}

a.ref-link:hover::after {
  transform: scale(1, 1);
}

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid black;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  z-index: 9999; /* Ensures the popup is on top of everything */
  width: 70vh;
  height: 60vh;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  z-index: 9998; /* Places the overlay below the popup */
}



@media (min-width: 320px) and (max-width: 767px) {
  
  .mySwiper2{
    margin-left: 0px;
  }
  
}