/* Always keep rounded corners */
.navbar-nav .nav-link {
  border-radius: 0.375rem; /* same as rounded */
  transition: background-color 0.2s, color 0.2s;
}

/* Hover effect */
.navbar-nav .nav-link:hover {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

.action-trigger-hover {
  transition: transform 0.2s ease-in-out;
}

.action-trigger-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.description-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  margin-bottom: 0;
}

.card-landing-course {
  height: 450px !important;
}

.card-body-landing-course {
  overflow: hidden;
}

#instructorCarousel .carousel-control-prev-icon,
#instructorCarousel .carousel-control-next-icon {
    background-image: none; /* remove default dark circle */
    width: 30px;
    height: 30px;
    border: none;
    position: relative;
}

#instructorCarousel .carousel-control-prev-icon::before,
#instructorCarousel .carousel-control-next-icon::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(220deg); /* prev arrow */
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
}

#instructorCarousel .carousel-control-next-icon::before {
    transform: rotate(45deg); /* next arrow */
}


.plyr--full-ui input[type=range] {
  color: #0EBC87 !important;
}

.plyr__control--overlaid {
  background: rgba(#0EBC87, .8) !important;
}

.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
  background: #0EBC87 !important;
}

.plyr__control.plyr__tab-focus {
  box-shadow: 0 0 0 5px rgba(#0EBC87, .5) !important;
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
  background: #0EBC87 !important;
}

.plyr__control--overlaid, .plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded="true"], .plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded="true"], .plyr__menu__container .plyr__control[role="menuitemradio"][aria-checked="true"]:before{
  background: #0EBC87 !important;
}

.bg-success-soft-hover:hover,
.bg-success-soft-hover:focus {
  background-color: rgba(25, 135, 84, 0.1) !important; /* soft green */
  color: #0EBC87 !important;
}