.main-container {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 2rem;
     background-color: #000; 
        }  

/* --- Left Side: The Circle --- */
        .circle-container {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 22rem; 
            height: 22rem;  
/*             margin: 0 auto;   */
          margin: 0 3rem 0 0rem; 
        }
 
        .rotating-circle-border {
          border: 1px solid #fff; 
    border-radius: 50%;
    height: 100%;
    position: absolute;
    transition: transform 1.2s cubic-bezier(.65,0,.35,1);
    width: 100%;
/*     box-shadow: 0 0 15px hsla(0, 0%, 100%, .3);  */
              box-shadow: inset 0 0 20px hsla(0, 0%, 100%, 0.2), 0 0 15px hsla(0, 0%, 100%, 0.3);
        } 
          .circle-center-img img{
/*            width: 14rem;     */
            width: 5rem; 
          }  
 
        .point-container {
            position: absolute;
/*             top: 50%;
            left: 50%; */
           top: 47%;
            left: 47%; 
            width: 1px;
            height: 1px;
        }
        
        .point {
            position: absolute;
              transform: translate(-40%, -50%);
            display: flex; 
            align-items: center; 
            cursor: pointer;
            width: auto; /* Adjust width automatically */
            transition: all 0.4s ease;
        }  

        .point-marker {
            height: 1.25rem;  
            width: 1.25rem; 
            background-color: #000;
            border: 1px solid #fff;
            border-radius: 50%; 
            transition: all 1.4s ease; 
            flex-shrink: 0; 
        }
        
        .point-text-wrapper {
/*             padding-left: 12px; */ 
            /* The counter-rotation is applied via JS */
            transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
        }

        .point-text-wrapper span {
            font-size: 0.75rem;
            color: #ffffff;
            opacity: 0.6;
            transition: all 1.4s ease;
/*             white-space: nowrap;  */
            width: 30px;
            display: block;
          font-weight: 300; 
        }  

        /* Active State for the Point */
        .point.active .point-marker {
                background-color: #000 !important;
            border-color: #ffffff; 
            transform: scale(1.7); 
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
               width: 1.5rem;
            height: 1.5rem;  
        }
        .point:hover .point-marker{
          box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
        }  
        .point.active .point-text-wrapper span {
            opacity: 1;
            font-weight: 500;
          font-size: 1.25rem;  
/*               font-size: 0.75rem !important;  */ 
        }


        /* --- Right Side: The Content --- */
        .content-container {
            padding-left: 5rem;
        }
        
        .content-slider .slide-content {
            outline: none; 
           height: 22rem; 
            display: flex; 
            flex-direction: column;
            justify-content: center;
        }

        .content-slider h3 {
/*             margin-bottom: 1.5rem; */ 
          color: #fff; 
        }

        .content-slider p {
            font-size: 1rem;
            line-height: 1.6;  
            color: #a0a0a0;
            margin-bottom: 2rem; 
              padding-right: 10rem; 
        }
         
        .brand-logos img {
            max-height: 30px;
            margin-right: 30px;
            filter: brightness(0) invert(1); /* Make logos white */
            opacity: 0.7;
            transition: opacity 0.3s;
        }
        .brand-logos img:hover {
            opacity: 1;
        }
.custom-dot-container {
     width: fit-content !important; 
    padding: 0.5rem 0.75rem;
    background: #323232; 
    border-radius: 50px;
/*     margin: auto;   */
  position: relative; 
}
.btm-1, .btm-2 {
 width: fit-content !important; 
      position: relative;
}  
#toggleAnimation {
 background: unset !important;
 padding: 0 !important;
  margin: 0 !important; 
}
 /* Slick Dots Wrapper */
.slick-dots {
    bottom: -60px;
    width: 100%;
    display: flex !important;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Each dot container */
.slick-dots li {
    display: inline-block;
    margin: 0 0.35rem; 
    width: auto; 
    height: auto; 
}

/* The actual dot (via customPaging span) */
.slick-dots li span.custom-dot {
    display: block;
    width: 0.375rem;
    height: 0.375rem;  
    background-color: #ccc;
    border-radius: 50%;
    transition: all 0.3s ease;
  position: relative; 
} 

/* Active dot - elongated and white */
.slick-dots li.slick-active span.custom-dot {
    width: 1.5rem;
/*     background-color: #fff; */
    border-radius: 30px;
  background-color: transparent;
  border: 1px solid #ccc; 
/*   border-style: inset; */ 
} 

.sec-title p {
 font-size: 1rem;   
}
 
        /* --- Responsive Design --- */
        @media (max-width: 991.98px) {
            .main-container {
                flex-direction: column;
                padding: 3rem 1rem;
            }
            .circle-container {
                width: 300px;
                height: 300px;
                margin-bottom: 100px; /* Space between circle and content */
            }
            .content-container {
                padding-left: 0;
                text-align: center;
            }
            .content-slider p {
                margin-left: auto;
                margin-right: auto;
            } 
            .brand-logos {
                justify-content: center;
            }
            .slick-dots {
                text-align: center;
                bottom: -50px;
            } 
        }
  .content-slider {
/*   height: 400px; /* or whatever fits your design */ */
  overflow: hidden;
    display: flex !important;
        align-items: center;
    justify-content: center;  
}  
.content-container img {
 width: fit-content;  
}
.circle-center-img h5 {
    border-top: 1px solid #141414;
    padding-top: 1rem;
    color: #fff;
    font-size: 1rem;
    padding: 1rem 2rem;
      font-weight: 600; 
}  


.rainbow-text {
  background: linear-gradient(
    270deg,
    #ff6ec4,
    #f87171,
    #facc15,
    #4ade80,
    #2dd4bf,
    #60a5fa,
    #a78bfa,
    #f472b6,
    #ff6ec4
  );
  background-size: 300% 100%; /* Show more colors at once */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowShift 10s ease-in-out infinite;
} 

@keyframes rainbowShift {
  0%   { background-position: 100% 0; }
  50%  { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}
 
/* .slick-dots li.slick-active span.custom-dot::before {
  content: '';
  position: absolute;
  top: 0px;  
  left: 0;
  height: 100%; 
  width: 0%; 
  background-color: #8D8D8D;
  border-radius: 30px;  
  animation: dotProgress var(--duration, 5s) linear forwards;
}  

@keyframes dotProgress {
  from { width: 0%; }
  to { width: 100%; }
} */
:root {
  --dot-animation-play: running;
}
.slick-dots li.slick-active span.custom-dot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;     
  height: 100%; 
  width: 100%;
  background-color: #8D8D8D;
  border-radius: 50px; 
  transform: scaleX(0);
  transform-origin: left;
/*   animation: dotProgress var(--duration, 5s) linear forwards; */
  animation: dotProgress var(--duration, 5s) linear forwards;
  animation-play-state: var(--dot-animation-play, running); 
}
 
@keyframes dotProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
 
span.custom-dot.restart-animation::before {
  animation: none !important;
} 

.slick-slider .slick-list {
	transform:rotate(180deg) !important;
}
.content-slider .slide-content {
      transform: rotate(180deg);
} 
  
/* .slick-slider .slick-slide {
	transform:rotate(180deg);
} */
 
.dot-row:before {
 content: '';
  position: absolute;
  width: 80%;
  margin: auto; 
  height: 1px;
  background-color: #141414; 
  z-index: 0; 
}
#toggleAnimation img {
/*  width: 30px;
  height: 30px;  */
} 


.point-text-wrapper {
  position: absolute;
/*   white-space: nowrap; */
  transform: rotate(0deg); /* text stays horizontal */
}

/* .point-text-wrapper.point-right        { top: -45px; left: -52px; transform: translate(10px, -50%) rotate(0deg); text-align: left; }
.point-text-wrapper.point-bottom-right { top: 100%; left: 100%; transform: translate(10px, 10px) rotate(0deg); text-align: left; }
.point-text-wrapper.point-bottom-left  { top: 100%; right: 100%; transform: translate(-10px, 10px) rotate(0deg); text-align: right; }
.point-text-wrapper.point-left         { top: 50%; right: 100%; transform: translate(-10px, -50%) rotate(0deg); text-align: right; }
.point-text-wrapper.point-top-left     { bottom: 100%; right: 100%; transform: translate(-10px, -10px) rotate(0deg); text-align: right; }
.point-text-wrapper.point-top-right    { bottom: 100%; left: 100%; transform: translate(10px, -10px) rotate(0deg); text-align: left; }
  */
 .point-labels-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* allow clicks to pass through */
}

.point-label {
    position: absolute;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    text-align: center;
} 

.point-label span { 
    display: inline-block;
    font-size: 13px;
    color: #fff;
} 

.point-text-wrapper.point-right span {
      transform:  translate(80px, -40px);
}   
.point-text-wrapper.point-left span {
      transform: translate(-30px, -40px);
}   
.point-text-wrapper.point-top-left span {
transform: translate(-5px, -40px);
} 
.point-text-wrapper.point-top-right span {
transform: translate(0px, -20px);
}    
.point-text-wrapper.point-top-right2 span {
transform: translate(40px, -15px);
}   
.point-text-wrapper.point-bottom-left span {
transform: translate(-8px, -60px);
}
.point-text-wrapper.point-bottom-right span {
transform: translate(50px, -58px);
} 
.point-text-wrapper span {
 width: 100px;  
}  


.point-container {
  position: absolute;
  top: 0;
  left: 0;
}

.point {
  position: absolute;
}

/* .point-marker {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
} */

.point-label {
  position: absolute;
  white-space: nowrap;
  text-align: center;
  font-size: 13px;
  color: #fff;
}