/* ======================================== */
/* GLOBX - HERO SECTION                     */
/* ======================================== */

/************************************
 * Hero Section
 ************************************/
.gx-hero {
  /* Robust sizing across all screens. The hero starts 95px ABOVE the
     viewport (margin-top: -95px), so to make the partners footer (110px)
     fit AT the bottom of the viewport we need:
        hero_height = 100vh - footer + |margin-top| = 100vh - 110 + 95 = 100vh - 15
     `max(…, 680px)` floors the hero so very short laptop windows still get
     a usable hero without crashing into the navbar. */
  min-height: max(calc(100vh - 15px), 680px);
  height: auto;
  max-height: none;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 8rem;
  padding-bottom: 5rem;
  width: 100%;
  margin-top: -95px;
}
/* Tablet  reduce hero floor + padding so it doesn't dominate. The footer
   marquee is the same 110px tall, so subtract it here too. */
@media (max-width: 991.98px) {
  .gx-hero {
    min-height: max(calc(85vh - 110px), 540px);
    padding-top: 7rem;
    padding-bottom: 4rem;
  }
}
/* Phones  the existing (max-width: 991.98px) hero block elsewhere already
   sets margin-top: 0 + flex-direction: column. We just keep the floor + */
/* padding sensible for very small screens. */
@media (max-width: 600px) {
  .gx-hero {
    min-height: max(70vh, 520px);
    padding-top: 6rem;
    padding-bottom: 3rem;
  }
}

/* Desktop: align the hero text column with the sidebar categories card so the
   CTA button shares roughly the same baseline as the bottom of the dark
   sidebar card  but lifted slightly so the content sits comfortably in the
   middle-lower third of the hero, not glued to the very bottom edge. */
@media (min-width: 992px) {
  /* Vertically center the row content inside the hero. The H1 / description /
     CTA cluster sits in the visual middle of the hero, the dark sidebar card
     aligns to its top via its own margin-top. */
  .gx-hero {
    align-items: center;
  }
  .gx-hero .row {
    align-items: center !important;
  }
  .gx-hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Reserve a band at the bottom of the column so the decorative chevron
       arrows have room to sit BELOW the CTA without overlapping copy. */
    padding-top: 0;
    padding-bottom: 6rem;
    position: relative;
  }
  /* Stack the visible copy ABOVE the chevron decoration  the carousel and
     the CTA must always read on top, with the arrows tucked behind. */
  .gx-hero-left .gx-hero-carousel,
  .gx-hero-left .gx-btn-primary,
  .gx-hero-left .gx-hero-pagination {
    position: relative;
    z-index: 2;
  }
  /* "About GlobX" CTA  natural width, not full-column. */
  .gx-hero-left .gx-btn-primary {
    align-self: flex-start;
    width: auto;
    min-width: 0;
    padding-inline: 1.75rem;
    margin-top: 0.5rem;
  }
}

/* Hero LCP image  actual <img> for fetchpriority="high" discovery.
   Was a div with CSS background-image (browser couldn't preload it). */
.gx-hero-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  filter: blur(0.5px) brightness(0.7);
  display: block;
  pointer-events: none;
  user-select: none;
}

.gx-hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}

.gx-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  /* padding-inline: 4.5rem; */
}

.gx-hero-left {
  position: relative;
  /* Align hero copy left edge with the navbar logo (both anchor to the
     Bootstrap .container's left padding only  no extra inner padding). */
  padding-left: 0;
  padding-top: 5.5rem;
  padding-bottom: 2.5rem;
}

.gx-arrows {
  /* Decorative chevrons anchor to the bottom-left of the hero-left column.
     Lowest z-index so the H1 / description / "About GlobX" button always
     render OVER the arrows  user content is the foreground, chevrons are
     a background flourish. */
  left: -90px;
  bottom: -3rem;
  z-index: 0;
  transition: transform 0.4s ease-out;
  transform: rotate(0deg);
  pointer-events: none;
}

.gx-arrows.rotated {
  transform: rotate(90deg);
}

/* Polish the existing hero-arrow.png:
   - subtle drop-shadow lifts it off the busy circuit-board background
   - gentle left-to-right slide draws the eye toward the CTA button
   - slightly softened opacity so it reads as decorative, not load-bearing */
.gx-arrows-img {
  display: block;
  opacity: 0.85;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
  animation: gxArrowSlide 2.6s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes gxArrowSlide {
  0%, 100% { transform: translateX(-6px); opacity: 0.65; }
  50%      { transform: translateX(0);    opacity: 1;    }
}

@media (prefers-reduced-motion: reduce) {
  .gx-arrows-img {
    animation: none;
    transform: none;
    opacity: 0.85;
  }
}

.gx-hero-title {
  font-size: 3.4rem;
  font-weight: 600;            /* heavier weight = stronger contrast over hero image */
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);  /* lifts text off busy bg */
  font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
}

.gx-hero-subtext {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.92);  /* was --text-light-2 (too dim)  now near-white */
  line-height: 1.7;
  font-weight: 400;            /* was 300  heavier for readability */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}



/* Sidebar Card  darker bg + brighter title for contrast */
.gx-sidebar-card {
  background: rgba(20, 24, 38, 0.85);   /* was hsla(0,0%,21%)  now semi-transparent dark navy */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  /* Tighter vertical padding + smaller min-height makes the card more compact
     while keeping all 9 category icons visible. */
  padding: 1.5rem 0 1.25rem;
  min-width: 340px;
  max-width: 370px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 30px;
}

.gx-sidebar-title {
  color: #ffffff;                /* was --text-light-2 (semi-transparent)  now full white */
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 1.25rem;
}

.gx-sidebar-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gx-sidebar-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.gx-sidebar-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 0;
  min-width: 0;
}

.gx-sidebar-icon {
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gx-sidebar-label {
  color: rgba(255, 255, 255, 0.88);   /* was dim  now near-white */
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.1rem;
  text-align: center;
  letter-spacing: 0.01em;
}

/* Sidebar pagination  "1/13" + arrow buttons (were too faint) */
.gx-sidebar-pagination,
#sidebar-pagination-indicator {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}
.gx-sidebar-pagination .gx-nav-arrow {
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transition: background .18s, border-color .18s;
}
.gx-sidebar-pagination .gx-nav-arrow:hover,
.gx-sidebar-pagination .gx-nav-arrow:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
}



/* Hero Footer (Partners Row)  fixed height prevents CLS when images/marquee load */
.gx-hero-footer {
  width: 100%;
  height: 110px;          /* fixed, not min-height  prevents CLS shift */
  padding: 0.5rem 0;
  background: var(--primary-lightest);
  border-top: none;
  box-shadow: none;
  position: relative;
  z-index: 10;
  overflow: hidden;
  display: flex;
  align-items: center;
  contain: layout paint;  /* tells browser this section doesn't affect outer layout */
}

.gx-partners-scroll-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.gx-partners-scroll-track {
  display: flex;
  align-items: center;
  height: 100%;
  animation: scroll-partners 50s linear infinite;
  width: max-content;
}

@keyframes scroll-partners {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.gx-partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;           /* fixed height matches img height  no CLS */
  width: 200px;
  opacity: 0.85;
  flex-shrink: 0;
}

.gx-partner-logo img{
  height: 70px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.gx-partner-logo svg {
  display: block;
  margin: 0 auto;
}

/* Owl Carousel Custom Styles */
.gx-hero-carousel {
  height: 270px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.gx-hero-carousel .owl-stage-outer {
  height: 100%;
}

.gx-hero-carousel .owl-stage {
  height: 100%;
}

.gx-hero-carousel .owl-item {
  height: 100%;
}

.gx-hero-slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gx-sidebar-carousel {
  overflow: hidden;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

@media (min-width: 992px) {
  .gx-sidebar-carousel .owl-stage-outer {
    width: 22rem;
  }
}

.gx-sidebar-carousel .owl-stage {
  width: 100%;
}

.gx-sidebar-carousel .owl-item {
  width: 100%;
}

.gx-sidebar-slide {
  width: 100%;
  padding-inline: 10px;
}

/* Hide default Owl Carousel navigation arrows */
.gx-hero-carousel .owl-nav,
.gx-sidebar-carousel .owl-nav {
  display: none !important;
}

/* Hide default Owl Carousel dots */
.gx-hero-carousel .owl-dots,
.gx-sidebar-carousel .owl-dots {
  display: none !important;
}

/* Ensure proper touch behavior */
.gx-hero-carousel,
.gx-sidebar-carousel {
  touch-action: pan-y pinch-zoom;
}

/* Smooth transitions for Owl Carousel */
.gx-hero-carousel .owl-item,
.gx-sidebar-carousel .owl-item {
  transition: all 0.3s ease;
}

/* Fade animation  ONLY apply opacity rule AFTER Owl has loaded.
   Before Owl loads, no .owl-item exists yet  but we need the first slide
   to show as static content. .owl-loaded gate ensures static HTML stays visible. */
.gx-hero-carousel.owl-loaded .owl-item.active,
.gx-sidebar-carousel.owl-loaded .owl-item.active {
  opacity: 1;
}

.gx-hero-carousel.owl-loaded .owl-item:not(.active),
.gx-sidebar-carousel.owl-loaded .owl-item:not(.active) {
  opacity: 0;
}

/* Ensure proper carousel behavior */
.gx-hero-carousel .owl-stage,
.gx-sidebar-carousel .owl-stage {
  display: flex;
  align-items: center;
}

/* Prevent text selection during carousel interaction */
.gx-hero-carousel,
.gx-sidebar-carousel {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Slide Animation Keyframes */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

/* Apply slide animations */
.gx-hero-carousel .owl-item.animated,
.gx-sidebar-carousel .owl-item.animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

.gx-hero-carousel .owl-item.slideInRight,
.gx-sidebar-carousel .owl-item.slideInRight {
  animation-name: slideInRight;
}

.gx-hero-carousel .owl-item.slideOutLeft,
.gx-sidebar-carousel .owl-item.slideOutLeft {
  animation-name: slideOutLeft;
}

/* Ensure smooth slide transitions */
.gx-hero-carousel .owl-stage,
.gx-sidebar-carousel .owl-stage {
  transition: transform 0.5s ease-in-out;
}

/* Prevent content overflow during slide animations */
.gx-hero-carousel,
.gx-sidebar-carousel {
  overflow: hidden;
  height: 100%;
}

/* Sidebar Icon Colors */
.gx-sidebar-icon svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.gx-sidebar-icon svg rect,
.gx-sidebar-icon svg path {
  stroke: var(--text-light-2);
  stroke-width: 2;
  fill: none;
}

.gx-sidebar-icon svg rect[fill="white"] {
  fill: var(--text-light-2);
}

.gx-sidebar-icon svg path[stroke="white"] {
  stroke: var(--text-light-2);
}

/* Hover effect for icons */
.gx-sidebar-cell:hover .gx-sidebar-icon svg rect,
.gx-sidebar-cell:hover .gx-sidebar-icon svg path {
  stroke: var(--primary);
  transition: stroke 0.2s ease;
}

.gx-sidebar-cell:hover .gx-sidebar-icon svg rect[fill] {
  fill: var(--primary);
  transition: fill 0.2s ease;
}

/* ======================================== */
/* HERO SECTION RESPONSIVE DESIGN          */
/* ======================================== */
@media (max-width: 991.98px) {
  .gx-partners-scroll-track {
    animation-duration: 25s;
  }

  .gx-arrows {
    display: none !important;
  }

  .gx-hero-carousel {
    margin-top: 1rem;
  }

  /* MOBILE HERO  full-viewport section, content pushed 200px down so the H1
     sits below the absolute-positioned navbar. Matches .gx-sell-excess-hero. */
  .gx-hero {
    min-height: 100vh;
    height: auto;
    flex-direction: column;
    align-items: flex-start !important;
    padding-top: 0;
    padding-bottom: 3rem;
    margin-top: 0 !important; /* navbar is absolute on mobile too  no overlap needed */
  }
  .gx-hero-content {
    margin-top: 200px;
  }

  /* Hero background covers FULL height of hero (incl. sidebar)  not just 100vh */
  .gx-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .gx-hero-overlay {
    position: absolute;
    inset: 0;
  }

  .gx-hero-content {
    padding-inline: 1rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
  }

  .gx-hero-left {
    padding-left: 0;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    text-align: center;
  }

  .gx-hero-title {
    font-size: 2rem;
    line-height: 1.2;
    max-width: 100%;
  }

  .gx-hero-subtext {
    font-size: 1rem;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }

  .gx-btn-primary {
    width: auto;
    min-width: 180px;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
  }

  .gx-hero-right {
    margin-top: 2rem !important;
    justify-content: center !important;
    display: flex;
    width: 100%;
  }

  .gx-sidebar-card {
    min-width: 0;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: 1.5rem 0.75rem 1.25rem;
    box-sizing: border-box;
  }
}

@media (max-width: 600px) {
  .gx-partners-scroll-track {
    animation-duration: 20s;
  }

  .gx-hero {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
  }

  .gx-hero-title {
    font-size: 1.6rem;
    margin-top: 0.5rem;
  }

  .gx-hero-subtext {
    font-size: 0.92rem;
  }

  .gx-sidebar-card {
    width: 92%;
    max-width: 100%;
    padding: 1.25rem 0.5rem 1rem;
    min-height: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gx-arrows {
    transition: none !important;
  }
  
  .gx-arrows.rotated {
    transform: rotate(90deg) !important;
  }
}