/* In services: running text : start */
.get-in-touch-link .loop-block {
  position: relative;
  overflow: hidden;
  /* Hide the text when it’s out of bounds */
  white-space: nowrap;
  /* Prevent wrapping of text */
  width: 100%;
  /* Adjust to the desired width */
  height: 50px;
  /* Adjust based on your design */
}

/* The text itself */
.text-loop {
  white-space: nowrap;
  /* Prevent wrapping */
  font-size: 24px;
  /* Adjust font size as needed */
  font-weight: bold;
  /* Adjust font weight */
  /* color: #333; Adjust color */
  animation: moveText 30s linear infinite;
  /* Set the duration and make it infinite */
}

/* Animation Keyframes to scroll text */
@keyframes moveText {
  0% {
    transform: translateX(100%);
    /* Start off-screen on the right */
  }

  100% {
    transform: translateX(-100%);
    /* Move off-screen to the left */
  }
}

/* In services: running text : end */

/* for all screen first section text*/

.animated-text {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 1s ease-out forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.product-name {
  display: inline-block;
  color: #333;
  /* Text color */
  overflow: hidden;
  /* Hide overflow to create typing effect */
  text-overflow: ellipsis;
  /* Display '...' when text overflows */
  white-space: nowrap;
  /* Prevent text wrapping for the first line */
  /* border-right: 2px solid #333; */

  animation: productTyping 4s steps(30, end) 1, fadeIn 1.5s ease-in-out;
  max-width: 100%;
  /* Limit the width based on parent container */
  box-sizing: border-box;
  /* Include padding and borders in the element's total width */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Limit to 2 lines */
  -webkit-box-orient: vertical;
}

@keyframes productTyping {
  0% {
    max-width: 0;
  }

  100% {
    max-width: 100%;
    /* Full width of the text */
  }
}

@keyframes productBlink {
  50% {
    border-right-color: transparent;
  }

  100% {
    border-right-color: transparent;
    /* Remove cursor after text completes */
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes popOut {
  0% {
    transform: scale(0.5) translateZ(-200px);
    opacity: 0;
  }

  50% {
    transform: scale(1.1) translateZ(0);
    opacity: 0.8;
  }

  100% {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
}

.banner-home-3-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  /* Enables 3D effect */
}

.banner-home-3-image {
  transform-origin: center;
  animation: popOut 3.5s ease-in-out forwards;
}

.product-name-highlighter {
  font-weight: 400;
  color: darkslateblue;
}

.pages-banner {
  position: relative; /* Make the parent container the reference point for absolute positioning */
}

.left-images-absolute-prod {
  position: absolute; /* Position the element absolutely inside the container */
  top: 0;  /* Align to the top */
  left: 0; /* Align to the left */
  z-index: 10; /* Ensure it is above other content if necessary */
}

.right-images-absolute-prod {
  position: absolute; /* Keep it absolute for the right bottom corner */
  bottom: 0;
  right: 0;
  z-index: 5; /* Ensure it’s below the left images */
}

/* Remove grid display for mobile view */
@media (max-width: 768px) {
  .collection-list-products {
      display: block;
  }
}