.custom-slider {
    position: relative;
    overflow: hidden;
      width: 100vw;
      max-width:100vw;
  }
  
  /* Slider Wrapper using CSS scroll-snap */
  .custom-slider-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Individual Slides */
  .custom-slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    /* Optional: add padding or margin if needed */
  }
  
  /* Hide scrollbar on WebKit browsers */
  .custom-slider-wrapper::-webkit-scrollbar {
    display: none;
  }
  
  /* Slider Navigation Arrows */
  .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 20px;
    cursor: pointer;
    font-size: 50px;
      font-weight:700;
    z-index: 10;
  }
  
  /* Positioning for Left and Right Arrows */
  .slider-arrow-left {
    left: 10px;
  }
  
  .slider-arrow-right {
    right: 30px;
  }
  
  /* Slider Navigation Dots Container */
  .slider-navigation {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
  }
  
  /* Individual Navigation Dot */
  .nav-dot {
    width: 15px;
    height: 15px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  /* Active or Hovered Dot */
  .nav-dot.active,
  .nav-dot:hover {
    background: #fafafa;
  }
  
  /* Each slide takes full container width and a uniform fixed height */
  .custom-slider .custom-slide {
    width: 100%;
    height: 800px; /* Adjust fixed height as needed */
    overflow: hidden; /* Hide any overflow for a clean crop */
  }
  
  /* Ensure images fill the entire slide area */
  .custom-slider .custom-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop images to fill the container */
    display: block;
  }
  
  @media screen and (max-width: 768px){
      .slider-arrow{
          display:none;
      }
  }