/* ==========================================================================
   1) ARROW BUTTONS: make them transparent, circular, centered vertically, 
      and show a white arrow via ::before
   ========================================================================== */

/* Base styles for both Prev and Next buttons */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;                         /* Vertically center */
  transform: translateY(-50%);      /* Shift up by half the button’s own height */
  
  width: 50px;                      /* same diameter you had before */
  height: 50px;
  border: none;                     /* remove any default browser border */
  border-radius: 50%;               /* make it a perfect circle */
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #006400; 
  /* 
     Use a semi-transparent black (30% opacity). 
     You can also do `background-color: transparent;` if you want no fill at all.
  */

  cursor: pointer; 
  z-index: 200;                     /* keep it above the slide image */

  /* 
     We’ll use a ::before pseudo-element to draw the arrow glyph.
     The actual <button> text (if any) is hidden by setting font-size:0.
  */
  font-size: 0;                     
  line-height: 0;
  text-indent: -9999px;             /* hide any text node, if present */
  overflow: hidden;                 /* ensure no text is visible */
}

/* Swap directions by rotating 180° */
.slick-prev::before {
  transform: rotate(180deg);
}
.slick-next::before {
  transform: rotate(180deg);
}

/* Position “previous” on the left, and “next” on the right */
.slick-prev {
  left: 20px;
}
.slick-next {
  right: 20px;
}

/* Pseudo-element for the arrow icon */
.slick-prev::before,
.slick-next::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  

  /* 
     Draw a simple CSS triangle. 
     For “prev,” it points left. For “next,” we’ll rotate it to point right.
  */
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;

  /* Base color of the arrow: white (you can change to any color) */
  border-left: 12px solid #ffffff;
}

/* Rotate the “next” pseudo-arrow so it points right instead of left */
.slick-next::before {
  border-left: none;               /* remove left-pointing triangle */
  border-right: 12px solid #ffffff;/* draw right-pointing triangle */
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* 
   On hover/focus, you might want to increase opacity or change color:
   (optional)
*/
.slick-prev:hover,
.slick-next:hover,
.slick-prev:focus,
.slick-next:focus {
  background-color: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   2) (Optional) If you still have default Slick positioning for “top” / “bottom”
      on these buttons, you can nullify them. 
      For instance, if slick-theme.css or slick.css had set:
         .slick-prev { top: 25px; bottom: -25px; }
         .slick-next { top: 25px; bottom: -25px; }
      You should override those here:
   ========================================================================== */

.slick-prev,
.slick-next {
  bottom: auto !important;
}

/* ==========================================================================
   3) (Optional) Dot navigation: keep as before or adjust for transparency
   ========================================================================== */

/* If you want your dots to remain exactly like before (16×16 white circles), you can skip this section. 
   But if you also want them transparent until hovered/active, you can do something like: */

.slick-dots li button {
  width: 16px;
  height: 16px;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.3); /* semi-transparent white */
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
}

/* On hover or when active, make the dot fully opaque */
.slick-dots li:hover button,
.slick-dots li.slick-active button {
  background-color: #ffffff;
  border-color: #ffffff;
}

/* ==========================================================================
   4) Example JS initialization reminder (no changes needed if you already have it)
   ========================================================================== */
/*
<script>
  $(document).ready(function(){
    $(".hero-slider").slick({
      arrows: true, 
      dots: true, 
      autoplay: true,
      autoplaySpeed: 5000 
    });
  });
</script>
*/
h1{ 
    font-size: 62px;
    font-weight: 700;
}