/* Wrapper layout */

.wipeDown {
  transform-origin: top center;
  transform: scaleY(0);
}

.wipeDown.play {
  animation: wipeReveal 0.8s ease-out forwards;
}

@keyframes wipeReveal {
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}


/* Each FAQ item */
.faq-item {
  padding: 16px 0;
  width: 100%;
    border-radius: 0;
    background-color: transparent;
    border: 0px;
    border-bottom: 2px solid #c9c7c7;
    border-style: dotted;
    padding: 15px 20px 15px 30px;
	text-align: left;

}

button.slick-next.mediaNextBtn.slick-arrow, button.slick-prev.mediaPrevBtn.slick-arrow {
    display: none!important;
}


/* clickable row */
.faq-question {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
  appearance: none;
}



/* chevron icon */
.faq-icon {
  width: 36px;
  height: 36px;
  line-height: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
  color: #000;
}

.faq-icon svg {
  width: 36px;
  height: 36px;
  stroke: #000;
  fill: none;
  stroke-width: 1;
  transition: transform .25s ease;
}

/* answer text */
.faq-answer {
  
  font-weight: 400;
  line-height: 1.5;
 
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease;
  padding-top: 0;
  padding-right: 32px; /* slight indent so long lines don't crash into chevron */
}



/* when item is open */
.faq-item.active .faq-answer {
  max-height: 500px; /* big enough to show content */
  opacity: 1;
  padding-top: 16px;
}

/* rotate chevron up when open */
.faq-item.active .faq-icon svg {
  transform: rotate(180deg);
}


/* mobile tweaks */
@media (max-width: 600px) {
  .faq-question {
    font-size: 16px;
  }
  .faq-answer {
    font-size: 15px;
  }
}
/* arrows */
.mediaArrows {
  position: absolute;
  right: 1rem;
  top: 0;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  gap: 12px;
}

.mediaArrows > div {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mediaArrows img {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1);
}

/* optional: hide arrows on desktop like other sections */
@media (min-width:1025px) {
  .mediaArrows {
    display: none !important;
  }
}

.sliderproject {
  position: relative;
  overflow: visible !important; /* <-- key fix */
}


.sliderproject .slider-container {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

.projectslider .projectslide-img-wrapper {
  position: relative;
  overflow: hidden;
}

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

.projectslide-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.5) 0%,
    rgba(0,0,0,0) 60%
  );
  pointer-events: none;
}




/* project brand logo that floats over the slide */
.prologo {
  position: absolute;
  left: 32px;
  bottom: 32px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.prologo img {
 
  width: auto;
  object-fit: contain;
  display: block;
}

/* custom navigation arrows */
.projectarrows {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 6;
  display: flex;
  gap: 12px;
}

.projectarrows button {
  background: rgba(0,0,0,0.5);
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 12px 24px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.projectarrows button img {
  width: 30px;
  height: 30px;
  object-fit: contain;
 
}

/* optional: hide arrows on mobile like your other slider */
@media (max-width: 500px) {
  .projectarrows {
    bottom: 16px;
    right: 16px;
  }
}

@media (min-width:1025px) {
  /* if you also want to hide these arrows on desktop, reuse this: */
  /* .projectarrows { display:none !important; } */
}


.animated-section {
  opacity: 0;
  transform: translateY(var(--y, 60px));
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

/* When it becomes visible */
.animated-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* desktop / default */
.consslide {
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
}

.wwdcontainer {
  margin-top: 24px;
}

.wwdSlider .wwditem {
  position: relative;
  cursor: pointer;
  text-align: center;
  padding: 16px 12px;
  /* floating animation styles from your code below will still apply */
}

.wwditemcontainer {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

/* Make sure images resize correctly inside cards */
.wwditemcontainer img {
  width: 100%;
  height: auto;
  display: block;
}

/* title text under the image */
.service-title {
  display: block;
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  color: #000; /* or your brand color */
  font-weight: 500;
}

/* optional hover pulse / lift */
.wwditem:hover {
  transform: translateY(-4px) scale(1.02);
  transition: transform .25s ease;
}







/* responsive tweak for tighter mobile cards */
@media (max-width: 480px) {
  .wwdSlider .wwditem {
    padding: 12px 8px;
  }
  .service-title {
    font-size: 15px;
  }
}



.wwdSlider .slick-prev,
.wwdSlider .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  z-index: 5;
  border: 0;
  cursor: pointer;
}

.wwdSlider .slick-prev {
  left: -14px;   /* tweak for mobile, can adjust */
}

.wwdSlider .slick-next {
  right: -14px;  /* tweak for mobile, can adjust */
}

.wwdSlider .slick-prev img,
.wwdSlider .slick-next img, button.slick-next.mediaNextBtn.slick-arrow img, button.slick-prev.mediaPrevBtn.slick-arrow img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  
}

/* hide default pseudo icons from Slick */
.wwdSlider .slick-prev:before,
.wwdSlider .slick-next:before {
  display: none;
}

button.slick-prev.mediaPrevBtn.slick-arrow {
    left: 0px;
}
button.slick-next.mediaNextBtn.slick-arrow {
    right: 20px;
    top: 202px;
}


/* Hide slick arrows on desktop */
@media (min-width: 1025px) {
  .wwdSlider .slick-prev,
  .wwdSlider .slick-next {
    display: none !important;
  }
}

/* Show them only on mobile/tablet */
@media (max-width: 1024px) {
  .wwdSlider .slick-prev,
  .wwdSlider .slick-next {
    display: flex !important;
  }
}




/* mobile */
@media (max-width: 768px) {
  .consslide {
     min-height: 380px;
  }
  button.slick-next.mediaNextBtn.slick-arrow, button.slick-prev.mediaPrevBtn.slick-arrow {
    display: block!important;
}

  

}