/*--------------------------------------------------------------------------
| Concentric Universe Orbit Brand Logo Slider Stylesheet (Large Oval)
| Auto Pulse Website Template
|--------------------------------------------------------------------------*/

/* Centered container box styling */
.cs_brands_wrapper {
  width: 100%;
  padding: 52px 40px 33px;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
}

/* Center the badge title horizontally on the top border line */
.cs_brands_wrapper .cs_brand_title {
  left: 50% !important;
  transform: translateX(-50%);
  top: -22px;
}

.cs_universe_container {
  position: relative;
  width: 100%;
  height: 420px; /* Bounded vertical height */
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
  overflow: visible;
  margin: 15px auto;
  transform-style: preserve-3d;
}

.cs_orbit_line {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 3.5px dashed var(--border-color, rgba(0, 0, 0, 0.1));
  border-radius: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  pointer-events: none;
  z-index: 1;
  transition: border-color 0.3s ease;
}

.cs_universe_container:hover .cs_orbit_line {
  border-color: rgba(0, 0, 0, 0.2);
}

/* Wide Large Oval Sizes */
.cs_orbit_line_1 {
  width: 420px; /* Radius Rx = 210px */
  height: 150px; /* Radius Ry = 75px */
}
.cs_orbit_line_2 {
  width: 700px; /* Radius Rx = 350px */
  height: 250px; /* Radius Ry = 125px */
}
.cs_orbit_line_3 {
  width: 980px; /* Radius Rx = 490px */
  height: 350px; /* Radius Ry = 175px */
}

/* Center Branding Box */
.cs_universe_center {
  position: absolute;
  width: 240px;
  text-align: center;
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateZ(40px);
  box-sizing: border-box;
}

.cs_universe_title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: #1a1a1a;
  margin: 0;
  font-family: var(--heading-font, sans-serif);
}

/* Orbit Track & Logo Badges */
.cs_orbit_track {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  z-index: 5;
}

.cs_orbit_logo {
  position: absolute;
  width: 85px; /* Large logo size */
  height: 85px;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  transform: translate(-50%, -50%) translateZ(20px);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  box-sizing: border-box;
}

.cs_orbit_logo img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.cs_orbit_logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.15);
}

/* Responsive adjustments for smaller viewports */
@media (max-width: 991px) {
  .cs_universe_container {
    height: 320px;
  }
  .cs_orbit_line {
    border-width: 2.5px;
  }
  .cs_orbit_line_1 {
    width: 280px;
    height: 110px;
  }
  .cs_orbit_line_2 {
    width: 460px;
    height: 180px;
  }
  .cs_orbit_line_3 {
    width: 640px;
    height: 250px;
  }
  .cs_orbit_logo {
    width: 65px;
    height: 65px;
  }
}

@media (max-width: 480px) {
  .cs_universe_container {
    height: 240px;
  }
  .cs_orbit_line {
    border-width: 2px;
  }
  .cs_orbit_line_1 {
    width: 180px;
    height: 80px;
  }
  .cs_orbit_line_2 {
    width: 290px;
    height: 130px;
  }
  .cs_orbit_line_3 {
    width: 400px;
    height: 180px;
  }
  .cs_orbit_logo {
    width: 50px;
    height: 50px;
  }
}