.hero {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 80px);
    padding: 60px 30px;
    gap: 70px;
    flex-wrap: wrap;
    /* justify-content: space-between; */
}

.hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: flex-start;
    /* padding-left: 30px; 
    padding-right: 30px;  */
    max-width: 600px; 
}

.hero-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-image {
    position: relative;
    width: 100%;
    max-width: 400px; 
    height: 400px;
    min-width: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.keyword {
    display: inline-block;
    position: relative;
    margin: 0 0px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.keyword a {
    color: inherit;
    text-decoration: none;
}

.keyword::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    transition: width 0.4s ease;
}

.keyword.red::after {
    background: linear-gradient(90deg, #ff0000, #ff3333);
}

.keyword.red:hover {
    color: #ff6666;
}

.keyword.red:hover::after {
    width: 100%;
}

.keyword.green::after {
    background: linear-gradient(90deg, #00ff00, #33ff33);
}

.keyword.green:hover {
    color: #66ff66;
}

.keyword.green:hover::after {
    width: 100%;
}

.keyword.blue::after {
    background: linear-gradient(90deg, #0000ff, #3333ff);
}

.keyword.blue:hover {
    color: #6666ff;
}

.keyword.blue:hover::after {
    width: 100%;
}

/* ========== Start of Vox animation styling ========== */

.animation-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    border-radius: 20px;
}

.circle-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: 10px;
}

.corner {
    position: absolute;
    width: 16px;
    height: 16px;
    color: white;
    opacity: 0;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.animation-container:hover .corner {
    opacity: 1;
}

.top-left {
    top: -8px;
    left: -8px;
    transition-delay: 0s;
}

.top-right {
    top: -8px;
    right: -8px;
    transform: rotate(90deg);
    transition-delay: 0.1s;
}

.bottom-left {
    bottom: -8px;
    left: -8px;
    transform: rotate(-90deg);
    transition-delay: 0.2s;
}

.bottom-right {
    bottom: -8px;
    right: -8px;
    transform: rotate(180deg);
    transition-delay: 0.3s;
}

/* ========== End of Vox animation styling ========== */

.section {
    padding: 3rem 0;
}

.section-title {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    color: #ffffff;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.card {
    background: var(--color-cream); 
    padding: 2rem;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    display: block;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 
                0 0 20px rgba(247, 202, 12, 0.2);
}

.card-icon {
    font-size: 2rem;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.card-icon.red { color: var(--red-color); }
.card-icon.green { color: var(--green-color); }
.card-icon.blue { color: var(--blue-color); }
.card-icon.cyan { color: var(--cyan-color); }
.card-icon.magenta { color: var(--magenta-color); }
.card-icon.yellow { color: var(--yellow-color); }

.card h3 {
    margin-bottom: 0.5rem;
    color: #1f2937;
}

.card p {
    color: #6b7280;
}

.contact-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
    color: #4b5563;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: var(--color-cream); 
    border-radius: 10px;
    text-decoration: none;
    color: #4b5563;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border: 2px solid transparent;
}

.contact-link.red:hover {
    background: var(--red-color);
    color: white;
    border-color: var(--red-color);
    box-shadow: 0 8px 20px rgba(255, 0, 0, 0.2);
}

.contact-link.green:hover {
    background: var(--green-color);
    color: white;
    border-color: var(--green-color);
    box-shadow: 0 8px 20px rgba(0, 255, 0, 0.2);
}

.contact-link.blue:hover {
    background: var(--blue-color);
    color: white;
    border-color: var(--blue-color);
    box-shadow: 0 8px 20px rgba(0, 0, 255, 0.2);
}

.contact-link.cyan:hover {
    background: var(--cyan-color);
    color: var(--color-dark);
    border-color: var(--cyan-color);
    box-shadow: 0 8px 20px rgba(0, 255, 255, 0.2);
}

.contact-link.magenta:hover {
    background: var(--magenta-color);
    color: white;
    border-color: var(--magenta-color);
    box-shadow: 0 8px 20px rgba(255, 0, 255, 0.2);
}

.contact-link.yellow:hover {
    background: var(--yellow-color);
    color: var(--color-dark);
    border-color: var(--yellow-color);
    box-shadow: 0 8px 20px rgba(255, 255, 0, 0.2);
}

.contact-link:hover {
    transform: translateY(-4px) scale(1.05);
}

/* ========== ===================== ========== */
/* ========== Home Hexagon Timeline ========== */
/* ========== ===================== ========== */

/* ── New Grid Logic ── */
.hex-grid-container {
  --s: 140px;  /* Size of hexagon */
  --g: 20px;   /* Gap between hexagons */
  
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--g);
  
  /* Enough width for 2 hexes + the staggered offset */
  width: calc(2.5 * var(--s) + var(--g)); 
  margin: 0 auto;
  padding-bottom: 50px;
}

.hex-item {
  width: var(--s);
  position: relative;
  /* Nest rows vertically */
  margin-bottom: calc(var(--s) / -4); 
}

/* Apply the honeycomb stagger to Row 2, 4, 6... */
.hex-item:nth-child(4n+3),
.hex-item:nth-child(4n+4) {
  transform: translateX(calc(var(--s) / 2 + var(--g) / 2));
}

/* Hexagon Styling */
.hex-timeline__hex {
  width: var(--s);
  aspect-ratio: cos(30deg); /* Maintains hexagon proportions */
  background: #ddd;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  filter: drop-shadow(0 0 2px #fff);
  overflow: hidden;
  transition: filter 0.3s ease;
}

/* Label styling to work within the grid */
.hex-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 150px;
  pointer-events: none;
  z-index: 5;
  margin-top: -20px; /* Pull text closer to the hexagon */
}

.hex-year {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  opacity: 0.6;
}

.hex-title {
  font-size: 0.9rem;
  line-height: 1.2;
}

/* Image & Hover effects */
.hex-timeline__hex img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-in-out;
  filter: grayscale(100%);
}

.hex-item:hover .hex-timeline__hex img {
  transform: scale(1.2);
  filter: grayscale(0%);
}

.hex-img-utd {
    /* Shows the whole logo instead of cropping it */
    object-fit: contain !important;
    background: #e87503;             /* Adds a background if the logo is transparent */
    padding: 0px;                 /* Shrinks the logo slightly so it doesn't touch the edges */
}

/* 
   Alternates hexagons left / right of a centre spine.
   Each item:  hex  →  connector (dot + line)  →  label
*/
 
/* ── Section wrapper ──────────────────────────────────────── */
.hex-timeline {
  padding: 80px 24px;
  /* Reduced max-width pulls the labels and hexes closer to center */
  max-width: 800px; 
  margin: 0 auto;
  color: #fff;
  overflow-x: hidden; /* Prevents slight scroll issues with negative margins */
}

.hex-timeline__heading {
  text-align: center;
  margin-bottom: 60px;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}

/* ── Track ────────────────────────────────────────────────── */
.hex-timeline__track {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Individual timeline item ─────────────────────────────── */
.hex-timeline__item {
  display: flex;
  align-items: center;
  width: 100%;
  
  /* Controls vertical interlocking. 
     A more negative value (e.g., -40px) makes them touch more. */
  margin-top: -15px; 
}

.hex-timeline__side {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0; /* Prevents flex items from overflowing */
}

/* CENTERING LOGIC:
   use negative margins to pull the hexagons toward the center line
*/


/* Left Side Items: Label is in the left-side container */
.hex-timeline__item[data-side="left"] .hex-timeline__side--left {
  justify-content: flex-end;
}

/* Right Side Items: Label is in the right-side container */
.hex-timeline__item[data-side="right"] .hex-timeline__side--right {
  justify-content: flex-start;
}


/* ── Hexagon ─────────────────────────────────────────────── */
.hex-timeline__hex-link {
  flex-shrink: 0;
  z-index: 2;
  margin: 0 10px; /* Small horizontal gap between hexes if needed */
}

/* Shift LEFT items slightly to the right of center */
.hex-timeline__item[data-side="left"] .hex-timeline__hex-link {
  margin-right: -25px; /* Half of the hexagon's overlap width */
  margin-left: 25px;
}

/* Shift RIGHT items slightly to the left of center */
.hex-timeline__item[data-side="right"] .hex-timeline__hex-link {
  margin-left: -40px; /* Half of the hexagon's overlap width */
  margin-right: 40px;
}

.hex-timeline__hex {
  width: 110px;
  height: 126px;
  background: #ddd;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
  /* This creates a thin "outline" around the clipped shape */
  filter: drop-shadow(0 0 2px #fff);
}

.hex-timeline__hex img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-in-out;
  filter: grayscale(100%); /* Make this image black and white */
}

.hex-timeline__item:hover .hex-timeline__hex img,
.hex-timeline__hex-link:hover .hex-timeline__hex img {
  transform: scale(1.2);
  filter: grayscale(0%); /* Turns back to color on hover */
}

.hex-timeline__item:hover .hex-timeline__hex {
  filter: brightness(1.1);
  transition: filter 0.3s ease;
}

/* ── Connector (The Line and Dot) ────────────────────────── */
.hex-timeline__connector {
  display: flex;
  align-items: center;
  /* Controls the horizontal distance to the text */
  width: 90px; 
  flex-shrink: 0;
}

/* Left item: [Label] [Dot--Line] [Hex] */
.hex-timeline__item[data-side="left"] .hex-timeline__connector {
  flex-direction: row;
  margin-right: 10px; /* INCREASE this (e.g., 20px) to push text away from dot */
  margin-left: 15px; /* btwn dot and text */
}

/* Right item: [Hex] [Line--Dot] [Label] */
.hex-timeline__item[data-side="right"] .hex-timeline__connector {
  flex-direction: row;
  margin-left: 10px;  /* INCREASE this (e.g., 20px) to push text away from dot */
  margin-right: 15px; /* btwn dot and text */
}

.hex-timeline__dot {
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.8;
  flex-shrink: 0;
}

.hex-timeline__line {
  height: 2px;
  background: currentColor;
  opacity: 0.3;
  flex-grow: 1;
}

/* ── Label ───────────────────────────────────────────────── */
.hex-timeline__label {
  text-decoration: none;
  color: inherit;
  /* Lower width brings the whole layout tighter to center */
  width: 200px; 
}

.hex-timeline__item[data-side="left"] .hex-timeline__label {
  text-align: right;
  margin-right: 12px;
}

.hex-timeline__item[data-side="right"] .hex-timeline__label {
  text-align: left;
  margin-left: 12px;
}

.hex-timeline__year {
    display: block;
  font-size: 1rem;
  font-weight: 700;
  opacity: 0.5;
}

.hex-timeline__title {
  font-size: 1.2rem;
  font-weight: 500;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hex-timeline__item,
  .hex-timeline__item[data-side="left"],
  .hex-timeline__item[data-side="right"] {
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
    margin-top: 20px;
    text-align: center !important;
  }

  .hex-timeline__connector {
    flex-direction: column !important;
    width: 2px;
    height: 40px;
    margin: 10px 0;
  }

  .hex-timeline__line {
    width: 2px;
    height: 100%;
  }

  .hex-timeline__label {
    text-align: center !important;
    margin: 0 !important;
  }
}

/* Container for the two hexagons */
.hex-timeline__center-pair {
  display: flex;
  gap: 4px; /* Space between the two hexagons on the same row */
  flex-shrink: 0;
  z-index: 2;
  /* Adjust to align with the staggered hexagons above/below */
  margin: 0 -28px; 
}

/* Adjust the double row behavior */
.hex-timeline__item--double {
  justify-content: center;
}

/* Ensure the labels in a double row align correctly */
.hex-timeline__item--double .hex-timeline__side--left {
  justify-content: flex-end;
}

.hex-timeline__item--double .hex-timeline__side--right {
  justify-content: flex-start;
}

/* double hexagons interlock with a single hexagon below it */
.hex-timeline__item--double + .hex-timeline__item:not(.hex-timeline__item--double) {
  margin-top: -38px;
}

/* */

.hex-timeline__tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none; /* prevents the tooltip from blocking the hover */
  background: rgba(20, 20, 20, 0.95);
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  max-width: 250px;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hex-timeline__tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* */

.timeline-icon-header {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;
  margin-bottom: 20px;    /* Space between icon and the first hexagon */
  width: 100%;
}

.timeline-icon-header .hex-tooltip-trigger {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: help;
  padding: 10px;          /* Makes the "hover" area larger and easier to hit */
  font-size: 1.5rem;      /* Adjust icon size here */
  color: rgba(255, 255, 255, 0.6); /* Matches timeline theme */
  transition: color 0.3s ease;
}

.timeline-icon-header .hex-tooltip-trigger:hover {
  color: #fff;            /* Brightens on hover */
}

/*
*
*
*
*/

/* UPDATED/IMPROVED hex timeline */

.hex-test {
  --s: 120px;  /* size  */
  --g: 20px;   /* gap */
  
  display: flex;
  flex-wrap: wrap;
  gap: var(--g);
  
  /* widen the container slightly to account for the offset shift */
  width: calc(2.5 * var(--s) + var(--g)); 
  margin: 0 auto;
  /* padding-left: calc(var(--s) / 4);  */
  counter-reset: num;
  overflow: visible;
}

.hex-test > * {
  width: var(--s);
  aspect-ratio: cos(30deg);
  /* border-radius: 50% / 25%;
  corner-shape: bevel;
  overflow: visible; /* lets the label escape the clip */
  margin-bottom: calc(var(--s) / -4);
  position: relative;
  z-index: 1;
  /* filter: drop-shadow(0 0 2px #fff); */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Offset every 3rd and 4th hexagon (second row) */
/* staggered honeycomb effect */
.hex-test > div:nth-child(4n+3),
.hex-test > div:nth-child(4n+4) {
  transform: translateX(calc(var(--s) / 2 + var(--g) / 2));
}

/* hex image/bg sits inside separate inner div so clip-path only clips that */
.hex-test__inner {
  width: 100%;
  height: 100%;
  position: absolute; /* Ensures it fills the parent exactly */
  top: 0;
  left: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: #ddd;
  z-index: 2; /* Sits under the labels or over*/
  
}

.hex-test__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: transform 0.4s ease;
  filter: grayscale(100%); /* Makes image black and white */
}

.hex-test > *:hover .hex-test__inner img {
  transform: scale(1.2);
  filter: grayscale(0%);
  filter: brightness(1.1);
  z-index: 10; /* Bring hovered hex and its label to the front */
}


/* Label extending to the LEFT */
.hex-test__label--left {
  position: absolute;
  right: calc(100% + 8px); /* 8px = dot width + small gap */
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  /* white-space: nowrap; */
  white-space: normal;
  pointer-events: none;
  z-index: 11; /* Ensure labels stay above the hexagon shapes */

  
}

/* Label extending to the RIGHT */
.hex-test__label--right {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  /* white-space: nowrap; */
  white-space: normal;
  pointer-events: none;
  z-index: 11; /* Ensure labels stay above the hexagon shapes */

  
}

.hex-test__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.8;
  flex-shrink: 0;
}

.hex-test__line {
  width: 60px;
  height: 2px;
  background: #fff;
  opacity: 0.3;
  flex-shrink: 0;
}

.hex-test__text {
  color: #fff;
  text-decoration: none;
  pointer-events: all;

  /* Force wrapping for long titles */
  white-space: normal; 
  word-wrap: break-word;
  width: 250px; 
  /* display: block; */
  display: flex;
  flex-direction: column;
  /* flex: 1;  */
}

/* Left label: text → line → dot → [hex] */
.hex-test__label--left .hex-test__text { order: 1; margin-right: 10px; text-align: right; }
.hex-test__label--left .hex-test__line { order: 2; }
.hex-test__label--left .hex-test__dot  { order: 3; margin-right: 10px;}

/* Right label: [hex] → dot → line → text */
.hex-test__label--right .hex-test__dot  { order: 1; margin-left: 10px;}
.hex-test__label--right .hex-test__line { order: 2; }
.hex-test__label--right .hex-test__text { order: 3; margin-left: 10px; text-align: left; }

.hex-test__year {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  opacity: 0.5;
}

/* favicon icon */
.hex-test__year i {
  font-size: 0.95rem;
}

.hex-test__title {
  display: block;
  font-size: 1.17rem;
  font-weight: 500;
  line-height: 1.5rem;
}

/*
*
*
*
*/

.hex-img-utd {
    /* Shows the whole logo instead of cropping it */
    object-fit: contain !important;     /* Shows the whole logo instead of cropping it */
    background: #e87503;             /* Adds a background if the logo is transparent */
    padding: 0px;                 /* Shrinks the logo slightly so it doesn't touch the edges */
}

.hex-img-rr {
    object-fit: contain !important;
    background: #aad3e0;
    padding: 0px;
}

.hex-img-qml {
    object-fit: contain !important;
    background: white;
    padding: 0px;
}

.hex-img-asl {
    object-fit: scale-down !important;
    background: #f18912;
    padding: 0px;
}

.hex-img-bp {
    object-fit: scale-down !important;     
    background: white;
    padding: 0px;
}

.hex-img-pc {
    object-fit: scale-down !important;     
    background: #e2e0be;      
    padding: 0px;  
}