.marquee-container:hover .marquee-text {
  animation-play-state: paused;
}
/* General Styles */
.header-bar {
  background-color: #f4f4f4; /* Background color */
  padding: 10px 0;
}

.custom-container {
  max-width: 1200px;
  margin: 0 auto;
}

.header-bar-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left select {
  padding: 5px;
  font-size: 14px;
}

/* Marquee Animation Styles */
.marquee-container {
  overflow: hidden; /* Hides the content that moves out of the container */
  position: relative;
  width: 100%; /* Full width of the container */
}

.marquee-text {
  display: inline-block;
  white-space: nowrap;
  font-size: 16px;
  font-weight: bold;
  color: #fff; /* Text color */
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.marquee-container:hover .marquee-text {
  animation-play-state: paused;
}
/* Apply to all paragraphs in service cards */
.service-card .service-description {
  font-size: 14px;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit the paragraph to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease; /* Smooth transition */
}

/* Show full description when hovering over the service card */
.service-card:hover .service-description {
  -webkit-line-clamp: unset; /* Allow full text display on hover */
  display: block;
}

/* Read More link styles */
.read-more {
  color: #007bff;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
  cursor: pointer;
}

/* Hide Read More link when the description is fully revealed on hover */
.service-card:hover .read-more {
  display: none; /* Hide the Read More link when hovering */
}
.swiper-container {
  width: 100%;
  height: auto;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.case-studio-img-card {
  /* Any custom styling for your card */
  width: 100%;
  max-width: 300px; /* Adjust based on your design */
  margin: 0 auto;
}
/* Three column layout */
.columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.column {
  display: flex;
  flex-direction: column;
} /* Shift entire column up, but not so much that it goes out of view */
.column-reverse {
  transform: translateY(calc(-100% + 100vh));
} /* As we're about to shift content out of .columns, we need it to hide its overflow */
.columns {
  overflow-y: hidden;
} /* Flip item order in reversed columns */
.column-reverse {
  flex-direction: column-reverse;
} /* Set up Animation */
@keyframes adjust-position {
  /* Start position: shift entire column up, but not so that it goes out of view */
  from {
    transform: translateY(calc(-100% + 100vh));
  }

  /* End position: shift entire column down, but not so that it goes out of view */
  to {
    transform: translateY(calc(100% - 100vh));
  }
} /* Hook our animation with the timeline to our columns */
.column-reverse {
  animation: adjust-position linear forwards;
  animation-timeline: scroll(root block);
}
.columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  width: 100%;
  max-width: 85rem;
  margin: 0 auto;
  position: relative;
}

/* Inside one column, lay out all items in column direction */
.column {
  --column-offset: 21vh;
  display: flex;
  flex-direction: column;
  padding: var(--column-offset) 0;
}

/* Limit site of the images */
.column__item-imgwrap img {
  border-radius: 1em;
  width: 100%;
  height: auto;
  aspect-ratio: 0.75;
  object-fit: cover;
}

.column__item-caption {
  text-align: center;
}

.info {
  display: none;
  border: 1px solid #123456;
  background: rgba(205 230 255 / 0.8);
}

/* Scroll-Timeline (Old Syntax) Supported, Yay! */
@supports (animation-timeline: works) {
  /* Hide Warning */
  .warning {
    display: none;
  }

  /* As we're about to shift content out of .columns, we need it to hide its overflow */
  .columns {
    overflow-y: hidden;
  }

  .column-reverse {
    /* Flip item order in reverse columns */
    flex-direction: column-reverse;
  }

  /* Set up Animation */
  @keyframes adjust-position {
    /* Start position: shift entire column up, but not so that it goes out of view */
    from {
      transform: translateY(calc(-100% + 100vh));
    }
    /* End position: shift entire column down, but not so that it goes out of view */
    to {
      transform: translateY(calc(100% - 100vh));
    }
  }

  /* Set up scroll-timeline */
  @scroll-timeline scroll-in-document {
    source: auto; /* Default scroll-timeline: scrolling in the document */
  }

  /* Hook our animation with the timeline to our columns */
  .column-reverse {
    animation: 1s adjust-position linear forwards;
    animation-timeline: scroll-in-document;
  }
}

/* general styles */
* {
  box-sizing: border-box;
}
canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Prevents the canvas from interfering with clicking */
  z-index: 9999; /* Ensures it stays on top of all other content */
}

/* Optional: Styling for the main content */
.homepage {
  position: relative;
  z-index: 10; /* Ensures it appears above the canvas */
  text-align: center;
}