/* Home hero background (moved from inline style="background-image: ...") */
.page-home #hero-section.hero-section.with-bg {
  background-image: url("/assets/images/milky-way-full-stars-space.jpg");
  background-size: cover;
  background-position: center;
}

/* "WE ARE Tglobal" section had inline max-width + margin */
.page-home .section-text--intro {
  max-width: 655px;
  margin: 180px auto;
}

/* Optional: if you want the h2/p centered without inline styles */
.page-home .section-text--intro h2,
.page-home .section-text--intro p {
  text-align: center;
}
/* ==========================================================================
   Home logo carousel arrows — FINAL (resets old .carousel-pagination rules)
   ========================================================================== */

.page-home .section-logos .relative {
  position: relative;
}

/* Add space so arrows don't overlap logos (mobile/tablet carousel) */
@media (max-width: 1024px) {
  .page-home .section-logos .relative {
    padding-left: 56px;
    padding-right: 56px;
  }
}

/* HARD RESET old .carousel-pagination positioning */
.page-home .section-logos nav.carousel-pagination {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  transform: none !important; /* <-- this is the key fix */
  display: block !important;
  width: 100% !important;

  z-index: 10;
  pointer-events: none;
}

/* Button base */
.page-home .section-logos nav.carousel-pagination > button.slick-prev,
.page-home .section-logos nav.carousel-pagination > button.slick-next {
  pointer-events: auto;

  width: 26px;
  height: 26px;
  border-radius: 999px;

  background: transparent !important; /* keep your no-fill rule */
  padding: 0;

  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  text-indent: -9999px;
  overflow: hidden;
}

.page-home .section-logos nav.carousel-pagination > button.slick-prev:hover,
.page-home .section-logos nav.carousel-pagination > button.slick-next:hover{
  border: 1px solid currentColor;
}

/* Force correct left/right placement (override any old left:50% etc.) */
.page-home .section-logos nav.carousel-pagination > button.slick-prev {
  left: 12px !important;
  right: auto !important;
}
.page-home .section-logos nav.carousel-pagination > button.slick-next {
  right: 12px !important;
  left: auto !important;
}

/* Theme-based arrow/button color */
body.theme-dark .page-home .section-logos nav.carousel-pagination {
  color: #f2f2f2;
}
body.theme-light .page-home .section-logos nav.carousel-pagination {
  color: #3b3b3b;
}

/* Draw chevrons (no SVG dependency) */
.page-home .section-logos nav.carousel-pagination > button.slick-prev::before,
.page-home .section-logos nav.carousel-pagination > button.slick-next::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  width: 8px;
  height: 8px;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: translate(-50%, -50%) rotate(-45deg);
}

.page-home .section-logos nav.carousel-pagination > button.slick-prev::before {
  transform: translate(-50%, -50%) rotate(135deg);
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .page-home .section-logos .relative {
    padding-left: 46px;
    padding-right: 46px;
  }

  .page-home .section-logos nav.carousel-pagination > button.slick-prev,
  .page-home .section-logos nav.carousel-pagination > button.slick-next {
    width: 30px;
    height: 30px;
  }

  .page-home .section-logos nav.carousel-pagination > button.slick-prev {
    left: 10px !important;
  }
  .page-home .section-logos nav.carousel-pagination > button.slick-next {
    right: 10px !important;
  }

  .page-home .section-logos nav.carousel-pagination > button.slick-prev::before,
  .page-home
    .section-logos
    nav.carousel-pagination
    > button.slick-next::before {
    width: 8px;
    height: 8px;
  }
}