/* ======================================== */
/* GLOBX - MARKETS & INDUSTRIES SECTION     */
/* ======================================== */

/* Markets & Industries Section Background */
.gx-markets-industries-section {
  background: transparent linear-gradient(115deg, var(--primary) 0%, hsla(199, 85%, 15%, 1) 100%) 0% 0% no-repeat padding-box;
  position: relative;
  overflow: hidden; /* Prevents icons from appearing outside the section during rotation */
  /* padding: 6rem 0; */
  width: 100%;
}

/* Decorative Arrow */
.gx-sector-arrow {
  position: absolute;
  left: -6.8rem;
  top: 25%;
  transform: translateY(-50%);
  z-index: 10;
}

.gx-sector-arrow img {
  width: 230px;
  height: 356px;
  opacity: 0.8;
}

/* Override text colors for dark background */
.gx-markets-industries-section .gx-section-label-common {
  color: var(--text-light-2);
}

.gx-markets-industries-section .gx-section-headline-common {
  color: var(--text-light);
}

.gx-markets-industries-section .gx-section-description-common {
  color: var(--text-light-2);
}

.gx-markets-industries-section .gx-markets-list-item {
  color: var(--text-light-2);
}

/* Markets & Industries Navigation (Left Column) */
.gx-markets-navigation {
  padding-right: 2rem;
}

/* Custom List Styling */
.gx-markets-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
}

.gx-markets-list-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-dark);
  font-weight: 400;
}

.gx-markets-list-icon {
  width: 10px;
  height: auto;
  margin-right: 1rem;
  flex-shrink: 0;
}

/* Markets & Industries Content (Right Column) */
.gx-markets-content {
  display: flex;
  align-items: center;
  justify-content: end;
}

/* --- Ensure illustration container is always square and fits the orbit --- */
.gx-markets-illustration-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
}

.gx-markets-illustration {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Keyframes for the orbital spin animation --- */
@keyframes spin-clockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-counter-clockwise {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* --- Keyframes for each icon's orbit --- */
/* The first rotate() defines the orbital path. */
/* The translateY() defines the distance from the center. */
/* The second rotate() is a counter-rotation to keep the icon upright. */

@keyframes orbit-outer-1 {
  from { transform: translate(-50%, -50%) rotate(0deg) translateY(36vmin) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg) translateY(36vmin) rotate(-360deg); }
}
@keyframes orbit-outer-2 {
  from { transform: translate(-50%, -50%) rotate(0deg) translateY(36vmin) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg) translateY(36vmin) rotate(360deg); }
}

@keyframes orbit-middle-1 {
  from { transform: translate(-50%, -50%) rotate(0deg) translateY(27vmin) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg) translateY(27vmin) rotate(-360deg); }
}
@keyframes orbit-middle-2 {
  from { transform: translate(-50%, -50%) rotate(0deg) translateY(27vmin) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg) translateY(27vmin) rotate(360deg); }
}

@keyframes orbit-inner-1 {
  from { transform: translate(-50%, -50%) rotate(0deg) translateY(18vmin) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg) translateY(18vmin) rotate(-360deg); }
}
@keyframes orbit-inner-2 {
  from { transform: translate(-50%, -50%) rotate(0deg) translateY(18vmin) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg) translateY(18vmin) rotate(360deg); }
}

@keyframes orbit-center-flip {
  0% { transform: rotateY(0deg); }
  20% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg); }
  70% { transform: rotateY(270deg); }
  100% { transform: rotateY(360deg); }
}

/* --- Robust Responsive Orbit --- */
.gx-orbit {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1/1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
}

.gx-orbit-center-container {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17vmin;
  height: 17vmin;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  padding: 2vmin;
  /* --- ADDED FOR 3D EFFECT --- */
  perspective: 1000px;
}

.gx-orbit-center {
  width: 70%;
  height: 70%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  animation: orbit-center-flip 3.2s linear infinite;
  backface-visibility: hidden;
  /* --- ADDED FOR 3D EFFECT --- */
  transform-style: preserve-3d;
}

@media (prefers-reduced-motion: reduce) {
  .gx-orbit-center {
    animation: none !important;
  }
}

.gx-orbit-ring {
  position: absolute;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-sizing: border-box;
}
.gx-orbit-ring-1 { width: 36vmin; height: 36vmin; animation: spin-clockwise 40s linear infinite; }
.gx-orbit-ring-2 { width: 54vmin; height: 54vmin; animation: spin-counter-clockwise 55s linear infinite; }
.gx-orbit-ring-3 { width: 72vmin; height: 72vmin; animation: spin-clockwise 70s linear infinite; }

/* Orbit Icon Container: now handles revolution and positioning */
.gx-orbit-icon-container {
  position: absolute;
  width: 7.5vmin;
  height: 7.5vmin;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

/* Remove revolution/positioning from the icon image itself */
.gx-orbit-icon {
  width: 50%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
  box-shadow: none;
  position: static;
  left: auto;
  top: auto;
  padding: 0;
  background: none;
}

/* Assign revolution animation to the container, not the image */
.gx-orbit-icon-container.gx-orbit-icon-1 { animation: orbit-inner-1 35s linear infinite; animation-delay: -15s; }
.gx-orbit-icon-container.gx-orbit-icon-6 { animation: orbit-inner-1 35s linear infinite; animation-delay: -5s; }
.gx-orbit-icon-container.gx-orbit-icon-7 { animation: orbit-inner-1 35s linear infinite; }
.gx-orbit-icon-container.gx-orbit-icon-2 { animation: orbit-middle-1 48s linear infinite; animation-delay: -10s; }
.gx-orbit-icon-container.gx-orbit-icon-3 { animation: orbit-middle-1 48s linear infinite; }
.gx-orbit-icon-container.gx-orbit-icon-4 { animation: orbit-middle-1 48s linear infinite; animation-delay: -20s; }
.gx-orbit-icon-container.gx-orbit-icon-5 { animation: orbit-outer-1 62s linear infinite; animation-delay: -25s; }
.gx-orbit-icon-container.gx-orbit-icon-8 { animation: orbit-outer-1 62s linear infinite; animation-delay: -5s; }
.gx-orbit-icon-container.gx-orbit-icon-9 { animation: orbit-outer-1 62s linear infinite; }

@media (max-width: 600px) {
  .gx-orbit-icon-container {
    width: 3.5vmin;
    height: 3.5vmin;
    padding: 0.3vmin;
  }
}

/* Tooltip for orbit icon containers */
.gx-orbit-icon-container {
  position: absolute;
  /* ...existing styles... */
}
.gx-orbit-icon-container[data-tooltip]:hover::after,
.gx-orbit-icon-container[data-tooltip]:focus::after {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -10px) scale(1);
}
.gx-orbit-icon-container[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: 110%;
  transform: translate(-50%, 0) scale(0.95);
  opacity: 0;
  pointer-events: none;
  background: rgba(20, 30, 40, 0.97);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.45em 1em;
  border-radius: 0.5em;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  z-index: 10;
  transition: opacity 0.18s cubic-bezier(0.4,0,0.2,1), transform 0.18s cubic-bezier(0.4,0,0.2,1);
}
.gx-orbit-icon-container[data-tooltip]:hover::before,
.gx-orbit-icon-container[data-tooltip]:focus::before {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}
.gx-orbit-icon-container[data-tooltip]::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 102%;
  transform: translate(-50%, 0) scale(0.95);
  opacity: 0;
  pointer-events: none;
  border-width: 7px 7px 0 7px;
  border-style: solid;
  border-color: rgba(20, 30, 40, 0.97) transparent transparent transparent;
  z-index: 11;
  transition: opacity 0.18s cubic-bezier(0.4,0,0.2,1), transform 0.18s cubic-bezier(0.4,0,0.2,1);
}

@media (max-width: 600px) {
  .gx-orbit-icon-container[data-tooltip]::after {
    font-size: 0.8rem;
    padding: 0.3em 0.7em;
  }
  .gx-orbit-icon-container[data-tooltip]::before {
    border-width: 5px 5px 0 5px;
  }
}

/* ======================================== */
/* MARKETS & INDUSTRIES RESPONSIVE DESIGN   */
/* ======================================== */
@media (max-width: 991.98px) {
  .gx-sector-arrow {
    display: none;
  }

  .gx-sector-arrow img {
    width: 100px;
  }

  .gx-markets-navigation {
    padding-right: 0;
  }

  .gx-markets-mobile-illustration .gx-markets-illustration-container {
    max-width: 350px;
    margin: 0 auto;
  }

  .gx-markets-list-item {
    font-size: 1rem;
  }
}

@media (max-width: 767.98px) {
  .gx-sector-arrow {
    left: 0.5rem;
  }

  .gx-sector-arrow img {
    width: 80px;
  }

  .gx-markets-mobile-illustration .gx-markets-illustration-container {
    max-width: 300px;
  }

  .gx-markets-list-item {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
  }

  .gx-markets-list-icon {
    width: 18px;
    height: 14px;
    margin-right: 0.75rem;
  }
}

@media (max-width: 575.98px) {
  .gx-sector-arrow {
    display: none;
  }

  .gx-markets-illustration-container {
    max-width: 300px;
  }

  .gx-markets-list-item {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }

  .gx-markets-list-icon {
    width: 16px;
    height: 12px;
    margin-right: 0.5rem;
  }
}