/* Text Slider Container */
  

/*   text slider css end here*/

    /* Layout utility classes */
    .custom-max-w-5xl {
      max-width: 80rem;
      margin-left: auto;
      margin-right: auto;
    }

    .custom-overflow-hidden {
      overflow: hidden;
    }

    .custom-p-4 {
      padding: 1rem;
    }

    .custom-p-6 {
      padding: 1.5rem;
    }

    .custom-rounded-lg {
      border-radius: 0.5rem;
    }

    .custom-shadow-md {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    /* Typography */
    .custom-text-lg {
        font-size: 14px;
        line-height: 1.75rem;
        display: -webkit-box;
      
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%; /* Adjust based on your layout */
    }

    .custom-text-sm {
      font-size: 0.875rem;
      line-height: 1.25rem;
    }

    .custom-text-gray-700 {
      color: #374151;
    }

    .custom-text-gray-500 {
      color: #6b7280;
    }

    .custom-text-gray-800 {
      color: #1f2937;
    }

    .custom-text-yellow-500 {
      color: #f59e0b;
    }

    .custom-font-medium {
      font-weight: 500;
    }

    .custom-font-bold {
      font-weight: 700;
          font-size: 15px;
    line-height: 0px;
    }

    /* Flexbox utilities */
    .custom-flex {
      display: flex;
    }

    .custom-flex-1 {
      flex: 1 1 0%;
    }

    .custom-flex-col {
      flex-direction: column;
    }

    .custom-flex-row {
      flex-direction: row;
    }

    .custom-items-center {
      align-items: center;
    }

    .custom-gap-6 {
      gap: 1.5rem;
    }

    /* Image styles */
    .custom-w-40 {
      width: 10rem;
    }

    .custom-h-40 {
      height: 10rem;
    }

    .custom-object-cover {
      object-fit: cover;
    }

    /* Border utilities */
    .custom-border {
      border-width: 1px;
      border-color: #e5e7eb;
    }

    /* Cursor utilities */
    .custom-cursor-pointer {
      cursor: pointer;
    }

    /* Carousel-specific styles */
    .custom-carousel {
      display: flex;
      overflow: hidden;
      scroll-behavior: smooth;
      position: relative;
    }

    .custom-carousel-track {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .custom-carousel-item {
      flex: 0 0 100%;
    }

    @media (min-width: 640px) {
      .custom-carousel-item {
        flex: 0 0 50%;
      }
    
    }

    /* Navigation buttons */
    .custom-carousel-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: white;
      color: black;
      padding: 0.44rem 0.51rem;
      border-radius: 50%;
      cursor: pointer;
          border: none;
      z-index: 10;
    }

    .custom-carousel-button:hover {
      background-color: black;
      color:white;
    }

    .custom-carousel-button.custom-left {
      left: 0.2rem;
    }


    .custom-carousel-button.custom-right {
      right: 0.2rem;
    }
    @media (min-width: 640px) {
    .sm\:flex-row {
        flex-direction: row;
    }

}
/*swiper slider css*/

/* Media gallery*/
.container.gallery {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
}

.slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 10px;
}

.slider img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

.slide {
    flex: 1 0 calc(25% - 10px); /* Desktop: 4 images per row */
    max-width: calc(25% - 10px);
}

@media (max-width: 1024px) {
    .slide {
        flex: 1 0 calc(33.333% - 10px); /* Tablet: 3 images per row */
        max-width: calc(33.333% - 10px);
    }
}

@media (max-width: 768px) {
    .slide {
        flex: 1 0 calc(100% - 10px); /* Mobile: 1 image per row */
        max-width: calc(100% - 10px);
    }
}

/* Navigation Buttons */
button.prev, button.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    color: white;
    border-radius: 50%;
    border: none;
    padding: 5px 5px;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
}

button.prev { left: 10px; }
button.next { right: 10px; }

button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
.prev:hover svg path, .next:hover svg path{
    stroke: white;
}