/* Zest Service Slider Section */

.unique-zest-service-slider-section {

  padding: 40px 20px;

  width: 100%;

  margin: 0 auto;

  background-color: #e6f5ff;

}



/* Slider Container */

.unique-zest-service-slider-container {

  position: relative;

  overflow: hidden;

  max-width: 1410px; /* 3 cards (450px) + 2 gaps (30px) */

  margin: 0 auto;

}



/* Hide Radio Inputs */

.unique-zest-service-slider-container input[type="radio"] {

  display: none;

}



/* Slides */

.unique-zest-service-slides {

  display: flex;

  transition: transform 0.5s ease-in-out;

}



/* Card Styling */

.unique-zest-service-card {

  flex: 0 0 450px; /* Fixed width for consistency */

  height: 550px;

  position: relative;

  border-radius: 20px;

  background-size: cover;

  background-position: center;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

  margin-right: 30px; /* Gap between cards */

}



/* Last card no margin */

.unique-zest-service-card:last-child {

  margin-right: 0;

}



/* Content Overlay */

.unique-zest-service-card-content {

  position: absolute;

  bottom: 20px;

  left: 20px;

  right: 20px;

  padding: 15px;

  border-radius: 8px;

}



/* Text Styling */

.unique-zest-service-card-content h3 {

  font-family: "Poppins", sans-serif;

  font-weight: 600;

  font-size: 22px;

  color: #ffffff;

  margin-bottom: 10px;

}



.unique-zest-service-card-content p {

  font-family: "Poppins", sans-serif;

  font-weight: 400;

  font-size: 15px;

  color: #ffffff;

  margin-bottom: 15px;

}



/* Button Styling */

.unique-zest-service-pagination-button {

  display: inline-flex;

  align-items: center;

  color: #fff;

  text-decoration: none;

  padding: 0 30px;

  font-family: "Poppins", sans-serif;

  font-weight: 500;

  font-size: 16px;

  transition: background-color 0.3s ease;

  height: 70px;

  background-color: #007bff;

}



.unique-zest-service-pagination-button:hover {

  background-color: #0056b3;

}



.unique-zest-service-button-text {

  margin-right: 18px;

  font-family: "Poppins", sans-serif;

  font-size: 24px;

  font-weight: bold;

}



.unique-zest-service-pagination-pipe {

  margin-right: 20px;

  width: 1px;

  font-size: 55px;

  transform: scaleX(0.1);

  display: inline-flex;

  align-items: center;

}



.unique-zest-service-pagination-arrow-icon {

  font-size: 18px;

}



/* Navigation Controls (Arrows Only) */

/* .unique-zest-service-slider-nav {

        position: absolute;

        top: 50%;

        width: 100%;

        display: flex;

        justify-content: space-between;

        transform: translateY(-50%);

        gap: 1200px !important;

      }



      .unique-zest-service-arrow {

        cursor: pointer;

        transition: opacity 0.3s ease;

        z-index: 10;

        display: flex;

        align-items: center;

        justify-content: center;

        background: none;

        border: none;

        padding: 10px;

        border-radius: 50%;

      }



      .unique-zest-service-prev {

        margin-left: 20px;

      }



      .unique-zest-service-next {

        margin-right: 20px;

      }



      .unique-zest-service-arrow:hover {

        opacity: 0.8;

      }



      .unique-zest-service-arrow-icon {

        height: 100px;

        width: 60px;

      }

      #prev-arrow {

        margin-left: -51px !important;

      }

      #next-arrow {

        margin-right: -50px !important;

      } */



/* Navigation Controls (Arrows Only) */

.unique-zest-service-slider-nav {

  position: absolute;

  top: 50%;

  width: 100%;

  display: flex;

  justify-content: space-between;

  transform: translateY(-50%);

}



.unique-zest-service-arrow {

  cursor: pointer;

  transition: opacity 0.3s ease;

  z-index: 10;

  display: flex;

  align-items: center;

  justify-content: center;

  background: none;

  border: none;

  padding: 10px;

  border-radius: 50%;

}



.unique-zest-service-prev {

  margin-left: 20px;

}



.unique-zest-service-next {

  margin-right: 20px;

}



.unique-zest-service-arrow:hover {

  opacity: 0.8;

  background-color: rgba(0, 123, 255, 0.1);

}



.unique-zest-service-arrow-icon {

  width: 37px;

  height: 37px;

}



/**********************************************************************************************/



/***********************************************************************************************/



/* Desktop: Show 3 cards */

@media (min-width: 1000px) {

  .unique-zest-service-slides {

    width: calc(4 * 450px + 3 * 30px); /* 4 cards + 3 gaps */

  }



  #unique-zest-service-slide-1:checked ~ .unique-zest-service-slides {

    transform: translateX(0);

  }

  #unique-zest-service-slide-2:checked ~ .unique-zest-service-slides {

    transform: translateX(-480px);

  } /* 450px + 30px gap */

  #unique-zest-service-slide-3:checked ~ .unique-zest-service-slides {

    transform: translateX(-960px);

  }

  #unique-zest-service-slide-4:checked ~ .unique-zest-service-slides {

    transform: translateX(-1440px);

  }

}



/* Tablet: Show 2 cards */

@media (min-width: 600px) and (max-width: 999px) {

  .unique-zest-service-slider-section {

    padding: 30px 15px;

  }



  .unique-zest-service-slider-container {

    max-width: 710px; /* 2 cards (350px) + 1 gap (10px) */

  }



  .unique-zest-service-card {

    flex: 0 0 350px;

    height: 400px;

    margin-right: 10px;

  }



  .unique-zest-service-slides {

    width: calc(4 * 350px + 3 * 10px); /* 4 cards + 3 gaps */

  }



  .unique-zest-service-card-content h3 {

    font-size: 18px;

  }



  .unique-zest-service-card-content p {

    font-size: 14px;

  }



  .unique-zest-service-pagination-button {

    padding: 8px 16px;

    font-size: 14px;

  }



  .unique-zest-service-button-text {

    font-size: 20px;

  }



  .unique-zest-service-pagination-pipe {

    font-size: 20px;

  }



  .unique-zest-service-pagination-arrow-icon {

    font-size: 16px;

  }



  .unique-zest-service-arrow .unique-zest-service-arrow-icon {

    width: 20px;

    height: 20px;

  }



  .unique-zest-service-prev {

    margin-left: 15px;

  }



  .unique-zest-service-next {

    margin-right: 15px;

  }



  #unique-zest-service-slide-1:checked ~ .unique-zest-service-slides {

    transform: translateX(0);

  }

  #unique-zest-service-slide-2:checked ~ .unique-zest-service-slides {

    transform: translateX(-360px);

  } /* 350px + 10px gap */

  #unique-zest-service-slide-3:checked ~ .unique-zest-service-slides {

    transform: translateX(-720px);

  }

  #unique-zest-service-slide-4:checked ~ .unique-zest-service-slides {

    transform: translateX(-1080px);

  }

}



/* Mobile: Show 1 cards */

@media (max-width: 599px) {

  .unique-zest-service-slider-section {

    padding: 20px 10px; /* Kept in pixels for consistent spacing; could use vw if desired */

  }



  .unique-zest-service-slider-container {

    width: 100%; /* Takes full width minus section padding; max-width unnecessary */

    /* border: 1px solid red; */

    padding-left: 2%;

  }



  .unique-zest-service-card {

    flex: 0 0 90vw; /* Card width is 90% of viewport width */

    width: 90vw; /* Explicit width for clarity; matches flex-basis */

    height: 400px; /* Could use vh (e.g., 50vh) for responsiveness */

    margin-right: 10vw; /* Gap is 10% of viewport width */

  }



  .unique-zest-service-card:last-child {

    margin-right: 0; /* Removes margin after the last card to match original gap logic */

  }



  .unique-zest-service-slides {

    width: calc(4 * 90vw + 3 * 10vw); /* 4 cards + 3 gaps between them */

    display: flex; /* Assuming flexbox is used; ensures layout consistency */

  }



  /* Slide translations */

  #unique-zest-service-slide-1:checked ~ .unique-zest-service-slides {

    transform: translateX(0);

  }

  #unique-zest-service-slide-2:checked ~ .unique-zest-service-slides {

    transform: translateX(-100vw); /* Moves by card width (90vw) + gap (10vw) */

  }

  #unique-zest-service-slide-3:checked ~ .unique-zest-service-slides {

    transform: translateX(-200vw);

  }

  #unique-zest-service-slide-4:checked ~ .unique-zest-service-slides {

    transform: translateX(-300vw);

  }



  /* Optional: Adjust text and button sizes for better scalability */

  .unique-zest-service-card-content h3 {

    font-size: 18px; /* Could use 5vw for responsiveness */

  }



  .unique-zest-service-card-content p {

    font-size: 14px; /* Could use 4vw */

  }



  .unique-zest-service-pagination-button {

    padding: 6px 12px; /* Could use 1.5vw 3vw */

    font-size: 12px; /* Could use 3vw */

  }

  .unique-zest-service-slider-button a {

    height: 50px !important;

  }



  .unique-zest-service-button-text {

    font-size: 15px;

    margin-right: 10px;

  }



  .unique-zest-service-pagination-pipe {

    font-size: 35px;

    margin-right: 10px;

  }



  .unique-zest-service-pagination-arrow-icon {

    font-size: 14px;

    margin-top: 5px;

  }



  .unique-zest-service-arrow .unique-zest-service-arrow-icon {

    width: 18px; /* Could use 5vw */

    height: 18px;

  }



  .unique-zest-service-prev {

    margin-left: 10px;

  }



  .unique-zest-service-next {

    margin-right: 10px;

  }

}