/* =========================
   SECTION SPACING
========================= */

.technology-section {
  padding: 60px 24px;
}

/* =========================
   TECHNOLOGY PAGE STYLES
========================= */

/* HERO */
.about-us-hero {
  position: relative;
  min-height: 550px;
  width: 98%;
  margin: 8px auto;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero-image-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.hero-content {
  position: relative;
  z-index: 1;
  color: #fff;
  transform: translateY(-40px); /* move up */
}

.product-hero-title {
  display: inline-block;
  line-height: 1.1;
}

.hero-subtitle {
  font-size: 24px;
  font-weight: 600;
}

.rotating-word {
    display: inline-block;
    font-style: italic;
    white-space: nowrap;
    transition: transform 0.6s ease, opacity 0.6s ease;
}
  
.word-exit {
    opacity: 0;
    transform: translateY(20px);
}
  
.word-enter {
    opacity: 0;
    transform: translateY(-20px);
    transition: transform 0.6s ease, opacity 0.6s ease;
}  

/* Optional: first word starts earlier */
.word-enter.first {
  transition-delay: 2s; /* adjust as needed */
}

/* =========================
   VISION
========================= */
.vision {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  text-align: center;
}

.vision .container {
  max-width: 820px;
}

.vision .eyebrow {
  margin-top: 60px;
  margin-bottom: 48px;
}

.vision .container h3 {
  font-weight: 500;
}

/* ==============================
     PRODUCT
================================ */

.device-card {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.5rem 2rem;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;

  text-decoration: none;
  color: inherit;

  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.device-card:hover {
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.cards-wrapper {
  display: flex;
  flex-direction: column; /* stack cards vertically */
  gap: 2rem; /* space between cards */
}

.device-image {
  flex: 0 0 280px;
}

.device-image img {
  width: 80%;
  max-width: 300px;  /* <-- won’t go over 300px */
  height: auto;
  object-fit: contain;
}

.device-info {
  flex: 1;
  max-width: 400px;   /* 👈 adjust to taste */
  align-self: flex-start;
}

.device-info .eyebrow {
  margin-top: 2rem;
  margin-bottom: 0.35rem;    /* spacing between eyebrow and title */
  color: var(--brand-primary);
}

.device-info .eyebrow:hover {
  color: #54669c;
}

.device-info h3 {
  font-size: 3rem;
  margin-bottom: 0.4rem;
}

.device-info h3:hover {
  color: #555;
}

.device-info p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
  margin-top: 0;
}

.device-info p:hover {
  color: var(--brand-primary);
}

.device-icons {
  display: flex;
  flex-direction: column;
  align-items: center;   /* 👈 centers everything horizontally */
  text-align: center;    /* 👈 centers the title text */
  gap: 0.75rem;
  min-width: 160px;
  margin-left: auto;
  margin-right: auto;
}

.icons-title {
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 1rem;
}

.icons-grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0.75rem 1.25rem;
  justify-content: center;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontally center everything */
  justify-content: center; /* vertically center multi-line labels */
  text-align: center;    /* centers multi-line text */
  gap: 0.35rem;
  min-width: 60px;       /* optional: ensures grid items align nicely */
}

.icon-label {
  font-size: 0.9rem;
  line-height: 1.2;
  display: block;
  white-space: normal;   /* allows text to wrap naturally */
  color: #666;
}

.icon-item:hover span {
  color: var(--brand-primary); /* darken the label when hovered */
}

.icon-item img {
  width: 50px;   /* change this */
  height: auto;  /* keeps aspect ratio */
  height: auto;
  margin-bottom: 2px;
}

.icon-item:hover img {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
}






/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {


/* MISSION */
.mission {
  padding: 4rem 2rem 6rem;
}
.mission .eyebrow {
  margin-bottom: 32px;
}

.about-us-hero {
  height: 60vh; /* smaller height for mobile */
  min-height: 300px; /* optional minimum */
}

.product-hero-title {
  font-size: 48px;
}

.hero-subtitle {
  font-size: 20px;
}

  /* Stack card sections vertically */
  .device-card {
    flex-direction: column;
    align-items: center;       /* centers all sections */
    text-align: center;        /* centers text */
    padding: 1.5rem 1rem;
    gap: 1.5rem;
  }

  /* Image section */
  .device-image {
    flex: none;                /* remove fixed width */
    width: 60%;                /* adjust image size on mobile */
    max-width: 240px;
  }

  .device-image img {
    width: 100%;
    height: auto;
  }

  /* Product info section */
  .device-info {
    flex: none;                /* remove middle column flex growth */
    max-width: 90%;            /* keep text readable */
    align-self: center;
  }

  .device-info h3 {
    font-size: 32px;
  }

  /* Icon section */
  .device-icons {
    margin-left: 0;              /* remove auto margin from desktop */
    margin-right: 0;
    align-self: center;          /* center the section horizontally */
    width: auto;                 /* shrink-wrap content */
  }

  .icons-grid {
    grid-template-columns: repeat(2, auto); 
    justify-content: center;     /* center the whole grid */
    justify-items: center;       /* center each icon in its cell */
  }

  .icon-item {
    align-items: center;      /* centers icon + label vertically */
    text-align: center;
  }

  .icon-item img {
    width: clamp(40px, 10vw, 48px); /* slightly larger on mobile */
    height: auto;
  }

  .icon-label {
    font-size: 0.65rem;
    line-height: 1.2;
  }

  /* Optional: eyebrow text smaller */
  .eyebrow {
    font-size: 0.6rem;
    margin-bottom: 20px;
  }


}