/* Testimonials Section Styles - Client feedback and trusted partners - Mobile First */
.testimonials-section {
  background: var(--testimonials-section-bg);
  position: relative;

  & .testimonials-grid {
    /* Positioning & Display */
    display: flex;
    flex-wrap: nowrap;

    /* Other */
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      /* Positioning & Display */
      display: none;

      /* Box Model */
      height: 8px;
    }

    & .testimonial-card {
      /* Positioning & Display */
      position: relative;
      flex: 1;
      flex-shrink: 0;
      scroll-snap-align: center;

      /* Box Model */
      box-sizing: border-box;
      min-width: 280px;
      width: 300px;
      max-width: 350px;
      padding: 1.5rem;
      border: 1px solid var(--border-color);
      border-radius: 12px;

      /* Colors & Backgrounds */
      background-color: var(--card-bg);

      /* Effects & Transitions */
      box-shadow: 0 4px 10px var(--card-shadow);
      transition: all 0.3s ease;

      & .testimonial-quote {
        /* Positioning & Display */
        position: relative;

        & i {
          /* Box Model */
          margin-bottom: 0.5rem;

          /* Typography */
          font-size: 1.25rem;
          color: var(--accent-color);
          opacity: 0.5;
        }

        & p {
          /* Positioning & Display */
          position: relative;
          z-index: 1;

          /* Box Model */
          margin-bottom: 1.25rem;

          /* Typography */
          font-style: italic;
          font-size: 0.95rem;
        }
      }

      & .testimonial-author {
        /* Positioning & Display */
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        & div {
          /* Box Model */
          width: 100%;

          /* Typography */
          text-align: center;
        }

        & .testimonial-image {
          /* Box Model */
          width: 50px;
          height: 50px;
          margin: 0 auto 0.5rem;
          border-radius: 50%;

          /* Other */
          object-fit: cover;
        }

        & .testimonial-position {
          /* Box Model */
          margin-bottom: 0;
        }
      }
    }
  }

  /* Client Logos Section inside Testimonials */
  & .client-logos-section {
    /* Positioning & Display */
    text-align: center;

    /* Box Model */
    border-top: none;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    padding: 3rem var(--spacing-lg) 0px var(--spacing-lg);
    margin-left: auto;
    margin-right: auto;

    & .client-logos-title {
      /* Box Model */
      margin-bottom: 1.5rem;

      /* Typography */
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--accent-color);
    }

    & .client-logos-container {
      /* Positioning & Display */
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;

      /* Box Model */
      width: 100%;
      max-width: 100%;
      padding-top: var(--spacing-lg);
      padding-bottom: var(--spacing-lg);
      gap: 1.5rem;
      box-sizing: border-box;

      & .client-logo-item {
        /* Positioning & Display */
        display: flex;
        justify-content: center;

        /* Box Model */
        flex: 0 0 auto;
        width: 90px;

        /* Effects & Transitions */
        transition: opacity 0.3s ease;
        /* filter: grayscale(100%); */

        & img {
          /* Box Model */
          width: 80px;
          max-height: 30px;

          /* Other */
          object-fit: contain;
        }
      }
    }

    & .client-logos-description {
      /* Positioning & Display */
      text-align: center;

      /* Box Model */
      margin-top: var(--spacing-lg);
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;

      /* Typography */
      color: var(--secondary-text);
      font-size: 0.9rem;
      line-height: 1.6;
    }
  }
}

/* Typewriter animation styles */
.typewriter-text {
  /* Positioning & Display */
  overflow: hidden;
  visibility: hidden;

  /* Typography */
  white-space: pre-wrap;
  word-break: break-word;
  font-style: italic;
  /* Preserving the original italic style */

  &.typing {
    /* Positioning & Display */
    visibility: visible;

    /* Effects & Transitions */
    animation: typing-effect 0.05s steps(1);

    &:empty::before {
      /* Positioning & Display */
      content: '​';
      color: var(--primary-color);
      /* Zero-width space to ensure cursor shows on empty elements */
    }
  }
}

.typewriter-container {
  /* Positioning & Display */
  position: relative;
}

.typewriter-cursor {
  /* Positioning & Display */
  display: inline-block;
  vertical-align: middle;

  /* Box Model */
  width: 2px;
  height: 1em;
  margin-left: 1px;

  /* Colors & Backgrounds */
  background-color: var(--text-color);

  /* Effects & Transitions */
  animation: cursor-blink 0.8s step-end infinite;

  &.hide-cursor {
    /* Positioning & Display */
    display: none;
  }
}

@keyframes cursor-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes typing-effect {
  from {
    width: 0
  }

  to {
    width: auto
  }
}

/* Small Tablet styles */
@media (min-width: 576px) {
  .testimonials-section {
    & .testimonials-grid {
      & .testimonial-card {
        /* Box Model */
        min-width: 290px;
        width: 310px;
      }
    }
  }
}

/* Tablet styles */
@media (min-width: 768px) {
  .testimonials-section {
    & .testimonials-grid {
      & .testimonial-card {
        /* Box Model */
        width: 320px;
        padding: 1.75rem;

        & .testimonial-quote {
          & i {
            /* Box Model */
            margin-bottom: 0.6rem;

            /* Typography */
            font-size: 1.35rem;
          }

          & p {
            /* Box Model */
            margin-bottom: 1.35rem;
          }
        }
      }
    }

    & .client-logos-section {
      /* Box Model */
      margin-top: 4rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;

      & .client-logos-title {
        /* Box Model */
        margin-bottom: 1.75rem;

        /* Typography */
        font-size: 1.15rem;
      }

      & .client-logos-container {
        /* Box Model */
        gap: 2rem;

        & .client-logo-item {
          /* Box Model */
          width: 90px;
          margin: 0 1rem;

          & img {
            /* Box Model */
            width: 90px;
            max-height: 40px;
          }
        }
      }

      & .client-logos-description {
        /* Box Model */
        margin-top: 2rem;
        padding: 0 1.5rem 1.75rem;
      }
    }
  }
}

/* Desktop styles */
@media (min-width: 992px) {
  .testimonials-section {
    & .testimonials-grid {
      & .testimonial-card {
        /* Box Model */
        min-width: 300px;
        width: 350px;
        padding: 2rem;
        border-radius: 15px;

        /* Effects & Transitions */
        box-shadow: 0 4px 15px var(--card-shadow);

        &:hover {
          /* Positioning & Display */
          transform: translateY(-5px);

          /* Effects & Transitions */
          box-shadow: 0px 0px 10px 0px var(--card-hover-shadow);
        }

        & .testimonial-quote {
          & i {
            /* Box Model */
            margin-bottom: 0.75rem;

            /* Typography */
            font-size: 1.5rem;
          }

          & p {
            /* Typography */
            font-size: 1rem;

            /* Box Model */
            margin-bottom: 1.5rem;
          }
        }
      }
    }

    & .client-logos-section {
      /* Box Model */
      margin-top: 5rem;
      max-width: 1200px;
      padding-left: 2rem;
      padding-right: 2rem;

      & .client-logos-title {
        /* Box Model */
        margin-bottom: 2rem;

        /* Typography */
        font-size: 1.2rem;
      }

      & .client-logos-container {
        /* Box Model */
        gap: 3rem;

        & .client-logo-item {
          /* Box Model */
          width: 100px;
          margin: 0 1.5rem;

          &:hover {
            /* Positioning & Display */
            opacity: 1;
            filter: grayscale(0%);
          }

          & img {
            /* Box Model */
            width: 100px;
            max-height: 50px;
          }
        }
      }

      & .client-logos-description {
        /* Box Model */
        margin-top: 3rem;
        max-width: 800px;
        padding-bottom: 2rem;

        /* Typography */
        font-size: 0.95rem;
      }
    }
  }
}