.bg_clr6{
    background-color: #fff;
   }
   .slide-track {
       position: relative;
       width: 100%;
       height: 750px;
       overflow: hidden;
       object-fit: cover;
   }

   .slide {
       position: absolute;
       inset: 0;
       display: flex;
       align-items: stretch;
       transition: opacity 0.6s ease, transform 0.6s ease;
       opacity: 0;
       pointer-events: none;
   }

   .slide.active {
       opacity: 1;
       pointer-events: all;
   }

   .slide-content {
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       width: 55%;
       display: flex;
       flex-direction: column;
       justify-content: center;
       padding: 3rem 2.5rem;
       z-index: 2;
   }

   .slide-bg {
       position: absolute;
       inset: 0;
   }

   .dots {
       position: absolute;
       right: 1.5rem;
       top: 50%;
       transform: translateY(-50%);
       display: flex;
       flex-direction: column;
       gap: 8px;
       z-index: 10;
   }

   .dot {
width: 18px;
    height: 18px;
       border-radius: 50%;
       border: 1.5px solid rgba(0,0,0,0.3);
       background: transparent;
       cursor: pointer;
       transition: background 0.3s;
   }

   .dot.active {
       background: #222;
   }

   .dot.dark {
       border-color: rgba(0, 0, 0, 0.4);
   }

   .dot.dark.active {
       background: #222;
   }

   .arrow {
       position: absolute;
       bottom: 1.5rem;
       z-index: 10;
       display: flex;
       gap: 8px;
       left: 2.5rem;
   }

   .arr-btn {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       border: 1.5px solid;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       font-size: 14px;
       transition: all 0.2s;
   }



@media only screen and (max-width :960px) {

   .slide-track {
        position: relative;
        width: 100%;
        height: 30vh;
        overflow: hidden;
        object-fit: cover;
    }

}