/* Services Timeline - Enhanced Service Cards with Journey-like Design */

.services-timeline {
  position: relative;
  padding: 70px 0;
  margin-top: 60px;
  /* Subtle blur effect to separate from main background */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  overflow: hidden; /* Ensure decorative elements don't overflow */
}

/* Services timeline background treatment */
.services-timeline:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 2, 20, 0.2); /* Reduced opacity for better visibility */
  z-index: -1;
  pointer-events: none; /* Ensures the background doesn't interfere with interactions */
  border-radius: 8px;
}

/* Decorative elements similar to Journey section */
.services-timeline-decoration {
  position: absolute;
  z-index: 0;
  opacity: 0.15;
  pointer-events: none;
}

.services-circle-1 {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  border: 25px solid #fad02c;
  top: -100px;
  right: -80px;
}

.services-circle-2 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 15px solid #fad02c;
  bottom: -60px;
  left: -80px;
}

.services-line-pattern {
  width: 120px;
  height: 240px;
  background-image: repeating-linear-gradient(
    45deg,
    #fad02c 0px,
    #fad02c 2px,
    transparent 2px,
    transparent 10px
  );
  top: 40%;
  left: 3%;
  transform: rotate(30deg);
}

.services-dots {
  width: 180px;
  height: 180px;
  background-image: radial-gradient(#fad02c 2px, transparent 2px);
  background-size: 15px 15px;
  bottom: 15%;
  right: 5%;
}

.services-timeline-container {
  position: relative;
  padding: 3rem 0 3rem 0;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.services-center-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #fada2c 0%, #fffbe6 100%);
  border-radius: 2px;
  z-index: 1;
  transform: translateX(-50%);
  box-shadow: 0 0 16px 2px rgba(250, 208, 44, 0.12);
}

/* === ACCESSIBILITY & VISUAL ENHANCEMENTS FOR SERVICES TIMELINE === */

/* Focus ring for keyboard navigation on service cards */
.service-event:focus-within,
.service-event:focus {
  outline: 3px solid #fada2c;
  outline-offset: 4px;
  z-index: 10;
  box-shadow: 0 0 0 6px rgba(250, 208, 44, 0.18);
}

/* Animate the center timeline line on scroll (subtle shimmer) */
.services-center-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #fada2c 0%, #fffbe6 100%);
  border-radius: 2px;
  z-index: 1;
  transform: translateX(-50%);
  box-shadow: 0 0 16px 2px rgba(250, 208, 44, 0.12);
  overflow: hidden;
}
.services-center-line::after {
  content: '';
  position: absolute;
  left: -40%;
  top: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    #fffbe6 0%,
    #fada2c 100%,
    transparent 100%
  );
  opacity: 0.7;
  animation: shimmer 2.5s infinite linear;
}

@keyframes shimmer {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}

/* Service card hover/focus effect for interactivity */
.service-event:hover .service-text-container,
.service-event:focus-within .service-text-container {
  box-shadow: 0 8px 40px 0 rgba(250, 208, 44, 0.18),
    0 4px 18px 0 rgba(0, 0, 0, 0.18);
  transform: translateY(-4px) scale(1.025);
}

/* Ensure all service images have a visible focus ring for keyboard users */
.service-content:focus {
  outline: 3px solid #fada2c;
  outline-offset: 2px;
}

/* Responsive: increase touch target size for mobile */
@media (max-width: 900px) {
  .service-event {
    min-height: 220px;
  }
  .service-content,
  .service-text-container {
    min-width: 0;
    width: 98vw;
    max-width: 98vw;
    border-radius: 1.1rem;
  }
}

@media (min-width: 1200px) {
  .service-content {
    flex: 0 0 480px;
    height: 320px;
  }
}

/* ARIA visually hidden utility for screen reader labels */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.service-event {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  min-height: 320px;
  overflow: visible;
  z-index: 2;
}

.service-event.left {
  flex-direction: row;
}
.service-event.right {
  flex-direction: row-reverse;
}

.service-content {
  flex: 0 0 420px;
  height: 280px;
  background: #222 url('../images/conference_events.jpeg') center/cover
    no-repeat;
  border-radius: 1.2rem;
  box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.13);
  margin: 0 0.5rem;
  position: relative;
  z-index: 2;
  transition: box-shadow 0.3s, transform 0.3s;
}
.service-content[data-service='conference'] {
  background-image: url('../images/conference_events.jpeg');
}
.service-content[data-service='product-launch'] {
  background-image: url('../images/product_launch.jpg');
}
.service-content[data-service='exhibition'] {
  background-image: url('../images/event_lighting.webp');
}
.service-content[data-service='hybrid'] {
  background-image: url('../images/hybrid_events.jpg');
}
.service-content[data-service='corporate'] {
  background-image: url('../images/corporate_event.jpg');
}
.service-content[data-service='personal'] {
  background-image: url('../images/festival&networking.jpg');
}

.service-content::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  background: rgba(250, 208, 44, 0.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

.service-text-container {
  position: relative;
  background: rgba(30, 30, 30, 0.97);
  color: #fff;
  padding: 2.2rem 2rem 2rem 2rem;
  border-radius: 1.2rem;
  box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.18);
  z-index: 3;
  font-size: 1.15rem;
  line-height: 1.7;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  overflow-wrap: break-word;
  word-break: break-word;
  overflow: visible;
  border: 1.5px solid rgba(250, 208, 44, 0.18);
  margin: 0 0.5rem;
  min-width: 260px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  transition: box-shadow 0.3s, transform 0.3s;
}

.service-event.left .service-text-container {
  margin-left: 32px;
  align-items: flex-start;
  text-align: left;
}
.service-event.right .service-text-container {
  margin-right: 32px;
  align-items: flex-end;
  text-align: right;
}

.service-icon-wrapper {
  font-size: 2.2rem;
  color: #fada2c;
  background: rgba(250, 208, 44, 0.08);
  border-radius: 50%;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 8px 0 rgba(250, 208, 44, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.service-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.2rem 0;
  color: #fada2c;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.service-description {
  font-size: 1.13rem;
  line-height: 1.7;
  color: #fff;
  background: rgba(30, 30, 30, 0.85);
  padding: 1.1rem 1.2rem;
  border-radius: 0.8rem;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow-wrap: break-word;
  word-break: break-word;
  overflow: visible;
}

.service-learn-more {
  display: inline-block;
  margin-top: 0.5rem;
  color: #fada2c;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.08rem;
  border-bottom: 1.5px solid #fada2c;
  transition: color 0.2s, border-color 0.2s;
}
.service-learn-more:hover {
  color: #fffbe6;
  border-color: #fffbe6;
}

/* Responsive: stack text below card on mobile */
@media (max-width: 900px) {
  .services-timeline-container {
    gap: 48px;
  }
  .service-event {
    flex-direction: column !important;
    align-items: stretch;
    min-height: 0;
  }
  .service-content,
  .service-text-container {
    margin: 0 auto 0 auto;
    max-width: 98vw;
    min-width: 0;
    width: 98vw;
    border-radius: 1.1rem;
  }
  .service-text-container {
    margin-top: 1.2rem;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 1.5rem 1.1rem 1.3rem 1.1rem;
  }
}

/* Subtle hover/active effect for cards */
.service-content:hover,
.service-text-container:hover {
  box-shadow: 0 8px 40px 0 rgba(250, 208, 44, 0.18),
    0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-4px) scale(1.025);
}