.custslider{
  position: relative;
 }
.custslider::after{
  content: '';
  background: url(https://beyondage-data.s3.ap-south-1.amazonaws.com/images/waves.png) no-repeat;
      position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    opacity: 0.1;
    z-index: 1;
    background-position: top;
 }
 .slidecontainer {
   display: flex;
   position: relative;
   height: 100vh;
 }

 .carousel {
   flex: 1;
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
   /* cursor: grab; */
 }

 .slides {
   display: flex;
   transition: transform 0.5s ease;
   height: 100%;

 }


 .slide {
   min-width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   position: relative;
 }

 .slides .slide>img, .slides .slide img {
   width: 100%;
   object-fit: cover;
   height: 100%;
 }

 .carousel::before {
   content: '';
   position: absolute;
   left: 0;
   height: 100%;
   box-shadow: 0px 3px 80px 150px #fff;
   z-index: 1;
 }
 
 .text-section, .carousel{
  height: 100%;
 }
 .text-section {
   flex: 1;
   padding: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   box-shadow: 2px 2px 2px #fff;
 }
.text-secinner {
    height: 250px;
}
 .text-section h2 {
   font-weight: 400;
   font-family: var(--font-family-playfair);
   font-size: 48px;
   color: var(--text-color);
   line-height: 60px;
   opacity: 1;
   transition: opacity 0.5s ease, transform 0.5s ease;
    height: 100%;
 }

 .text-section h2.fade-out {
   opacity: 0;
 }

 .controls {
   position: absolute;
   top: 50%;
   width: 100%;
   display: flex;
   justify-content: space-between;
   transform: translateY(-50%);
   padding: 0 1rem;
   pointer-events: none;
 }

 .controls button {
   background: rgba(255, 255, 255, 0.7);
   border: none;
   padding: 0.5rem 1rem;
   font-size: 1.2rem;
   /* cursor: pointer; */
   pointer-events: auto;
 }

 .pagination {
   position: absolute;
   bottom: 0;
   left: 0;
   display: flex;
   gap: 0px;
   z-index: 2;
   width: 100%;
   justify-content: center;
 }

 .dot {
   width: 22%;
   height: 4px;
   border-radius: 20px;
   background: #fff;
   cursor: pointer;
   overflow: hidden;
   opacity: 1;
 }

 .dot.active {
   background: #003921;
 }

 /* New CSS for Smooth */

 #slides {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}

#carousel {
  overflow: hidden;
  cursor: default;
}

.fade-out {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}