/* ==========================================================================
   CAROUSEL SUPPORTS VOILE STYLES
   ========================================================================== */

.category-card {
  height: 60vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-shadow: 0px 0px 3px #d7d7d7;
}

.category-card a {
  color: white;
  position: relative;
  z-index: 1;
  display: inline-flex;
  padding: 2%;
  width: 90%;
  justify-content: center;
  margin-bottom: 16px;
  border: 1px solid white;
  text-transform: uppercase;
  font-size: 1.3rem;
  letter-spacing: 0.3vw;
  transition: all 0.2s linear;
}

.category-card a:hover {
  transform: scale(1.05);
}

.category-card:before {
  content: '';
  display: block;
  width: 100%;
  height: 70%;
  position: absolute;
  bottom: 0;
}

/* Category-specific gradients */
.category-card.deriveurs:before {
  background: linear-gradient(0deg, rgba(30 76 138) 0%, rgba(30 76 138) 15%, rgba(0, 212, 255, 0) 100%);
}

.category-card.foils:before {
  background: linear-gradient(0deg, rgba(226 73 18) 0%, rgba(226 73 18) 15%, rgba(0, 212, 255, 0) 100%);
}

.category-card.voilier:before {
  background: linear-gradient(0deg, rgba(163 23 94) 0%, rgba(163 23 94) 15%, rgba(0, 212, 255, 0) 100%);
}

.category-card.catamaran:before {
  background: linear-gradient(0deg, rgba(151 204 198) 0%, rgba(151 204 198) 15%, rgba(0, 212, 255, 0) 100%);
}

.category-card.planche:before {
  background: linear-gradient(0deg, rgba(234 163 6) 0%, rgba(234 163 6) 15%, rgba(0, 212, 255, 0) 100%);
}

.category-card.paddle:before {
  background: linear-gradient(0deg, rgba(111 111 111) 0%, rgba(111 111 111) 15%, rgba(0, 212, 255, 0) 100%);
}

/* Owl carousel nav/dots for supports-voile */
div.supports-voile-carousel .owl-nav button.owl-next {
  right: -59px !important;
}

div.supports-voile-carousel.owl-carousel .owl-nav button.owl-next,
div.supports-voile-carousel.owl-carousel .owl-nav button.owl-prev {
  color: #1e4c8a;
  background: white !important;
  display: flex;
  width: fit-content;
  height: fit-content;
  padding: 14px !important;
  border-radius: 50%;
}

div.supports-voile-carousel.owl-carousel .owl-nav button.owl-prev span {
  position: relative;
  top: -7px;
  left: -2px;
}

div.supports-voile-carousel.owl-carousel .owl-nav button.owl-next span {
  position: relative;
  top: -7px;
  left: 1px;
}

div.supports-voile-carousel.owl-carousel button.owl-dot {
  border: 1px solid white !important;
}

div.supports-voile-carousel.owl-carousel .owl-dots button.owl-dot.active {
  background-color: #fff !important;
}

.owl-carousel .owl-stage-outer {
  margin-left: 0 !important;
}

/* Responsive */
@media screen and (max-width: 1200px) {
  .category-card {
    height: 35vh;
  }
}

@media screen and (max-width: 767px) {
  .category-card {
    height: 60vh;
  }
}