.tab-content.active {
  display: block;
}

.cursor {
  display: inline-block;
  animation: blink 1s infinite;
  color: #F5C235;
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

.typing-line {
  display: block;
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.module-modal {

  visibility: hidden;

  opacity: 0;

  transition: all 0.3s;

}



.module-modal.active {

  visibility: visible;

  opacity: 1;

}



.module-modal .modal-content {

  transform: translateY(-5rem);

  transition: all 0.3s;

}



.module-modal.active .modal-content {

  transform: translateY(0);

}

.gradient-text-green {
  background: linear-gradient(0deg, #134F49 0%, #09363F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.input_date::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  background-image: url('../../images/solar_calendar-linear.svg');
  background-size: cover;
  pointer-events: none;

}

.button_plus_minus {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid white;
  flex-shrink: 0;
  &:before,
  &:after {
    content: '';
    position: absolute;
    background-color: white;
    transition: transform 0.25s ease-out;
  }

  /* Vertical line */
  &:before {
    top: 4px;
    /* Padding top */
    bottom: 4px;
    /* Padding bottom */
    left: 50%;
    width: 2px;
    height: auto;
    margin-left: -1px;
  }

  /* horizontal line */
  &:after {
    top: 50%;
    left: 4px;
    /* Padding left */
    right: 4px;
    /* Padding right */
    width: auto;
    height: 2px;
    margin-top: -1px;
  }

  &.active {
    cursor: pointer;
    background: white;
    &:before {
      transform: rotate(90deg);
      background:#357100;
    }

    &:after {
      transform: rotate(180deg);
      background:#357100;
    }
  }
}

.bg-opacity-overlay {
  position: relative;
  z-index: 1;
}

.bg-opacity-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../../images/bg_banggia.jpg') no-repeat center/cover;
  opacity: 0.7;
  z-index: -1;
  border-radius: 1.25rem;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-content-image {
  display: none;
}

.tab-content-image.active {
  display: block;
}

.tab-link {
  transition: all 0.3s ease;
}

.tab-link.active {
  opacity: 1;
  background: #F5C235 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}