/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

.tab_slider .slides {
  position: relative;
  overflow: hidden;
  height: 600px; /* Adjust to fit slide content */
}

.tab_slider .slides > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.5s ease;
  pointer-events: none;
}

.tab_slider .slides > div.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.tab_slider .slides > div.slide-in-left {
  transform: translateX(0%);
}

.tab_slider .slides > div.slide-in-right {
  transform: translateX(0%);
}

.tab_slider .slides > div:not(.slide-in-left):not(.slide-in-right) {
  z-index: 1;
  transform: translateX(100%);
}

/* Entering from right (default) */
.tab_slider .slides > div.slide-in-left {
  animation: slideInFromRight 0.5s forwards;
}

/* Entering from left (going backward) */
.tab_slider .slides > div.slide-in-right {
  animation: slideInFromLeft 0.5s forwards;
}

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

/* Tabs styling (same as before) */
.tab_slider .tabs button {
  background: none;
  border: none;
  font-weight: normal;
  cursor: pointer;
  padding: 10px 16px;
  font-size: 16px;
}
.tab_slider .tabs button.active {
  font-weight: bold;
    border-bottom: 2px solid #000;
}
  
  
  .tab_slider .slides > div.active:not(.slide-in-left):not(.slide-in-right) {
  opacity: 1;
  transform: translateX(0%);
  position: relative; /* optional: to stack properly */
  z-index: 2;
}
  border-bottom: 2px solid #000;
}