@media (min-width: 992px) {
  .we-do-cards>div * {
    transition: 0.3s;
  }

  .we-do-cards> :is(:nth-child(1), :nth-child(2), :nth-child(3)):hover * {
    transform   : translateY(-13%);
    border-color: rgb(var(--bs-primary-rgb)) !important;
    color       : rgb(var(--bs-primary-rgb)) !important;
  }

  .we-do-cards> :is(:nth-child(4), :nth-child(5), :nth-child(6)):hover * {
    transform   : translateY(13%);
    border-color: rgb(var(--bs-primary-rgb)) !important;
    color       : rgb(var(--bs-primary-rgb)) !important;
  }
}

/* hover animation */
.connecter-1 {
  transition: 1s ease-in-out;
}

.connecter:hover .connecter-1 {
  transform: translate(-15px, -15px);
}

.connecter-2 {
  transition: 1s ease-in-out;
}

.connecter:hover .connecter-2 {
  transform: translate(15px, 15px);
}

.bar {
  transition: 1s ease-in-out;
}

.bar:hover {
  transform: translate(-15px, 0px);
}

.bracket-1 {
  transition: 2s ease-in-out;
}

.left-bracket:hover .bracket-1 {
  transform: translate(-20px, 0px);
}

.bracket-2 {
  transition: 2s ease-in-out;
}

.left-bracket:hover .bracket-2 {
  transform: translate(20px, 0px);
}

.text-up {
  transition      : 1s ease-in-out;
  transition-delay: 3s;
}

.bar-1 {
  opacity   : 1;
  transition: opacity 5s;
  transition: 1s ease-in-out;
}

.card:hover .bar-1 {
  opacity  : 0;
  transform: translate(65px, 45px);
}

.text-up {
  transition: 1s ease-in-out;
  transform : translate(0, 30px);
}

.card:hover .text-up {
  transform: translate(0, 0);
}

.bar-2 {
  transition: 1s ease-in-out;
}

.bar-2:hover {
  transform: translate(20px, 10px);
}

.bar-3 {
  transition: 1s ease-in-out;
}

.bar-3:hover {
  transform: translate(-20px, -15px);
}

.plane {
  transform : translate(0, 30px);
  transition: 1s ease-in-out;
}

.card-left,
.card-right {
  transition: 1s ease-in-out;
}

.idea-img:hover .card-right {
  transform: translate(30px, 10px);
}

.idea-img:hover .card-left {
  transform: translate(-20px, -15px);
}

.idea-img:hover .plane {
  transform: translate(0, 0);
}

.bg-search {
  background   : transparent !important;
  border       : 1px solid rgba(255, 255, 255, 0.23) !important;
  border-radius: 15px;
}

.form-control {
  color : #fff !important;
  border: none !important;
}

.form-control::placeholder {
  font-size  : 16;
  font-weight: 400;
  color      : #FFFFFF !important;
}

.form-control:focus {
  box-shadow: none;
}


.swiper-slide {
  text-align : center;
  font-weight: 400 !important;
  font-size  : 13px;
}

.swiper-slide p {
  border-radius: 50px;
}

.swiper-slide img {
  display   : block;
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

.swiper-button-next {
  top    : 50%;
  content: url("../asset/trends/next.svg");
}

.swiper-button-prev {
  top    : 50%;
  content: url("../asset/trends/prev.svg");
}

.card-body {
  padding: 0 !important;
}

.card-title {
  font-weight: 700;
  font-size  : 24px;
}

.btn--sm {
  padding: 5px 10px;
}

.scrollbar-none {
  scrollbar-width: none;
}

.scrollbar-none::-webkit-scrollbar {
  width: 0;
}

.dropdown-menu {
  background-color: rgba(28, 28, 30, 1);
  color           : #FFFFFF;
  border          : 1px solid #FFFFFF;
}

.dropdown-item {
  color: #fff;
}

.dropdown-toggle::after {
  margin-left: 2.255em;
}

@media screen and (max-width:455px) {
  .dropdown-toggle::after {
    margin-left: 10em;
  }
}

@media screen and (max-width:385px) {
  .dropdown-toggle::after {
    margin-left: 15em;
  }
}

@media screen and (max-width:325px) {
  .dropdown-toggle::after {
    margin-left: 11em;
  }
}

.dropdown-menu {
  width: 100%;

}

@media screen and (max-width:770px) {
  .dropdown-toggle::after {
    margin-left: 1em;
  }
}


#filter-scroller {
  scroll-behavior: smooth;
}

.button-check+label:hover .pulse {
  background-color: rgba(var(--bs-primary-rgb), .6)
}

.button-check:checked+label * {
  color: rgba(var(--bs-secondary-rgb), 1) 
}

.button-check+label {
  min-width    : max-content;
  border-radius: 50px;
}

.button-check:checked+label {
  background-color: rgba(var(--bs-primary-rgb), 1);
  color: rgba(var(--bs-secondary-rgb), 1) 
}
.button-check:not(:checked)+label {
  background-color: rgba(var(--bs-primary-rgb), 0);
  color: rgba(var(--bs-primary-rgb), 1);
  border-color: rgba(var(--bs-primary-rgb), 1); 
}

input {
  outline: none !important
}

.swiper-slide {
  width: fit-content;
}