/* Smooth transitions */
.timeline-item,
.hexagon-wrapper,
.timeline-content,
.timeline-content h3,
.timeline-content p {
    transition: all 0.28s ease;
}

/* Entire card hover */
.timeline-item:hover {
    transform: translateY(-4px);
}

/* Hex glow + lift */
.timeline-item:hover .hexagon-wrapper {
    transform: translateY(-3px) scale(1.03);
    filter:
        drop-shadow(0px 10px 18px rgba(139, 92, 246, 0.18))
        drop-shadow(0px 4px 8px rgba(217, 70, 239, 0.12));
}

/* Heading emphasis */
.timeline-item:hover h3 {
  color: #000;
  letter-spacing: 2.5px;
  word-break: break-all;
}

/* Slight body text clarity increase */
.timeline-item:hover p {
    opacity: 1;
}

/* Connector animation */
.timeline-item:hover .line-short,
.timeline-item:hover .line-long {
    background: rgba(139, 92, 246, 0.35);
}

/* Dot glow */
.timeline-item:hover .dot-outer {
    border-color: rgba(139, 92, 246, 0.45);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.18);
}

#timeline {
   background-color: #fafafa;
   margin: 0;
   padding: 40px;
   font-family: sans-serif;
 }

 /* 3-Column CSS Grid Container */
 .timeline-container {
   display: grid;
   grid-template-columns: 1fr 320px 1fr;
   gap: 40px 20px;
   max-width: 1200px;
   margin: 0 auto;
   align-items: center;
 }

 /* Base structure for each service block */
 .timeline-item {
   display: flex;
   align-items: center;
   position: relative;
 }

 /* LEFT SIDE COLUMN (Items 1 & 2) */
 .column-left {
   grid-column: 1;
   display: flex;
   flex-direction: column;
   gap: 60px;
 }
 .column-left .timeline-item {
   flex-direction: row-reverse;
 }
 .column-left .timeline-content {
   margin-right: 15px;
   margin-left: 0;
   text-align: right;
 }
 .column-left .connector {
   flex-direction: row-reverse;
 }
 .column-left .line-long {
   margin-right: 5px;
   margin-left: 0;
 }

 /* CENTER MIDDLE COLUMN (Item 3) */
 .column-center {
   grid-column: 2;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .column-center .timeline-item {
   flex-direction: column;
   text-align: center;
   width: 100%;
 }
 .column-center .connector {
   flex-direction: column;
   margin: 10px 0;
 }
 .column-center .line-short, 
 .column-center .line-long {
   width: 2px;
   height: 25px;
   margin: 0;
 }
 .column-center .timeline-content {
   margin-left: 0;
   max-width: 280px;
 }

 /* RIGHT SIDE COLUMN (Items 4 & 5) */
 .column-right {
   grid-column: 3;
   display: flex;
   flex-direction: column;
   gap: 60px;
 }

 /* Hexagon wrapper with custom clip-path and gradients */
 .hexagon-wrapper {
   width: 80px;
   height: 90px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   flex-shrink: 0;
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
   filter: drop-shadow(0px 5px 6px rgba(0, 0, 0, 0.15));
 }

 /* Inner white/gray gradient plate */
 .hexagon-inner {
   width: 76%;
   height: 79%;
   background: linear-gradient(135deg, #ffffff 0%, #f9f9fb 40%, #eef0f6 100%);
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 /* Base styling for icons inside hexagons */
 .hexagon-inner i {
   font-size: 24px;
 }

 /* --- DIGITAL LAVENDER SPECTRUM THEME DEFINITIONS --- */
 
 /* Solid Icon Colors for crisp rendering */
 .icon-violet { color: #5b21b6; } /* Item 1 */
 .icon-lavender  { color: #8b5cf6; } /* Item 2 */
 .icon-fuchsia   { color: #d946ef; } /* Item 3 */
 .icon-rose   { color: #ec4899; } /* Item 4 */
 .icon-coral  { color: #f43f5e; } /* Item 5 */

 /* Fluid Gradient Variations for Outer Hexagon Borders */
 .border-violet   { background: linear-gradient(180deg, #5b21b6 0%, #4c1d95 100%); }
 .border-lavender { background: linear-gradient(180deg, #8b5cf6 0%, #6d28d9 100%); }
 .border-fuchsia  { background: linear-gradient(180deg, #d946ef 0%, #a21caf 100%); }
 .border-rose  { background: linear-gradient(180deg, #ec4899 0%, #be185d 100%); }
 .border-coral { background: linear-gradient(180deg, #f43f5e 0%, #e11d48 100%); }

 /* Connector line and dot styling */
 .connector {
   display: flex;
   align-items: center;
   flex-shrink: 0;
 }
 .line-short {
   width: 20px;
   height: 2px;
   background: #e2e8f0;
 }
 .dot-outer {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: white;
   border: 2px solid #cbd5e1;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 .dot-inner {
   width: 6px;
   height: 6px;
   border-radius: 50%;
 }
 .line-long {
   width: 25px;
   height: 2px;
   background: #f1f5f9;
   margin-left: 5px;
 }

 /* Dynamic Inner Dot Color Connectors */
 .dot-violet   { background: #5b21b6; }
 .dot-lavender { background: #8b5cf6; }
 .dot-fuchsia  { background: #d946ef; }
 .dot-rose  { background: #ec4899; }
 .dot-coral { background: #f43f5e; }

 /* Styling for the text content block */
 .timeline-content {
   max-width: 260px;
 }
 .timeline-content h3 {
   margin: 0 0 4px 0;
   font-size: 16px;
   color: #1e1b4b; /* Subtle midnight indigo for high tech text depth */
   font-weight: 700;
   letter-spacing: 1px;
   word-break: break-all;
 }
 .timeline-content p {
   margin: 0;
   font-size: 16px;
   letter-spacing: 0.3px;
   color: #000;
   opacity: 0.8;
   line-height: 1.4;
 }

 /* Responsive adjustment for small viewport monitors */
 @media (max-width: 992px) {
  .timeline-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .column-left, .column-center, .column-right {
    grid-column: 1;
    gap: 30px;
   }
  
  .column-left .timeline-item {
    flex-direction: row;
  }
  
  .column-left .timeline-content {
    margin-left: 15px;
    margin-right: 0;
    text-align: left;
  }
  
  .column-left .connector, .column-center .connector {
    flex-direction: row;
  }
  
  .column-center .timeline-item {
    flex-direction: row;
    text-align: left;
  }
  
  .column-center .line-short, .column-center .line-long {
    width: 20px;
    height: 2px;
  }

}

#timeline h1,
#timeline h2,
#timeline h3,
#timeline h4,
#timeline p,
#timeline span {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}