/* Slider */
.slick-slider {
  position: relative;

  display: block;
  box-sizing: border-box;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;

  display: block;
  overflow: hidden;

  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;

  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before,
.slick-track:after {
  display: table;

  content: "";
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;

  height: 100%;
  min-height: 1px;
}
[dir="rtl"] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;

  height: auto;

  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}

/* =========================
   PMCC - Slick Previous and Next Tweaks
   ========================= */
.pmcc-carousel-control {
  margin: 2rem 0;
}

/* Base button size — match the circle */
.pmcc-carousel-control .slick-prev,
.pmcc-carousel-control .slick-next {
  background: transparent !important;
  border: none;
  width: 55px;
  height: 55px;
  font-family: "Material Symbols Rounded";
  font-size: 0; /* hide original text */
  color: transparent; /* hide original text */
  cursor: pointer;
  position: relative;
  padding: 0;
  margin: 0;
}

/* Remove default Slick ::before */
.pmcc-carousel-control .slick-prev:before,
.pmcc-carousel-control .slick-next:before {
  content: "";
}

/* Previous icon with circular background */
.pmcc-carousel-control .slick-prev::after {
  content: "keyboard_arrow_left";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #f6f6f6;
  color: #1a1a1a;
  font-family: "Material Symbols Rounded";
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
  font-size: 36px;

  transition: transform 0.3s ease, color 0.3s ease, background-color 0.4s ease,
    box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Next icon with circular background */
.pmcc-carousel-control .slick-next::after {
  content: "keyboard_arrow_right";
  font-family: "Material Symbols Rounded";
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
  font-size: 36px;
  color: #1a1a1a;
  background: #f6f6f6;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease, color 0.3s ease, background-color 0.4s ease,
    box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Hover effect */
.pmcc-carousel-control .slick-prev:hover,
.pmcc-carousel-control .slick-next:hover {
  opacity: 0.25;
}
/* disabled */
.pmcc-carousel-control .slick-disabled {
  opacity: 0.25;
  pointer-events: none;
  cursor: default;
}

/* =========================
   PMCC - Slick Dots Tweaks
   ========================= */

/* Container for dots inside your control */
.pmcc-carousel-control .slick-dots {
  display: flex !important; /* make dots inline */
  gap: 8px; /* spacing between dots */
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center; /* center dots inside container */
  align-items: center;
}

/* Each dot item */
.pmcc-carousel-control .slick-dots li {
  width: 16px; /* size of the dot */
  height: 16px;
  cursor: pointer;
  position: relative;
}

/* Dot button itself */
.pmcc-carousel-control .slick-dots li button {
  font-size: 0; /* hide the number text */
  color: transparent; /* hide the number */
  border: none;
  outline: none;
  background: #d3d3d3; /* background color of dot */
  width: 16px;
  height: 16px;
  border-radius: 50%; /* make it circular */
  display: block;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}

/* Active dot */
.pmcc-carousel-control .slick-dots li.slick-active button {
  opacity: 0.25;
  /* transform: scale(1.2);  */
}

/* Hover effect */
.pmcc-carousel-control .slick-dots li button:hover {
  opacity: 0.25;
  /* transform: scale(1.2); */
}

/* Hide dots if there are no arrows */
.pmcc-carousel-control .slick-arrows-group:empty + .slick-dots {
  display: none !important;
}

/* adjust carousel width */
.carousel-item-inner {
  width: 98.5%;
}

@media (max-width: 768px) {
  .pmcc-carousel-control {
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px;
    width: 100%;
  }

  /* Dots go first */
  .pmcc-carousel-control .slick-dots {
    order: 1;
    display: flex !important;
    justify-content: center !important;
    width: 100%;
    margin: 0;
  }

  /* Arrows follow next */
  .pmcc-carousel-control .slick-arrows-group {
    order: 2;
    display: flex;
    justify-content: center !important;
    width: 100%;
    margin-top: 20px;
    gap: 30px;
  }

  /* Hover effect */
  .pmcc-carousel-control .slick-prev:hover,
  .pmcc-carousel-control .slick-next:hover {
    opacity: inherit;
  }

  .pmcc-carousel-control .slick-prev:active,
  .pmcc-carousel-control .slick-next:active {
    opacity: 0.25;
  }
}