
@media (max-width: 400px) {
  .Chatfooter {
    padding-block: 0.3rem;
    bottom: 0px;
  }
  .fontMobile{
font-size: 10px;
  }
  .promptWindow{
    height: 12rem;
    overflow: scroll;
  }
}




@media (max-width: 362px) {
  .nav-item  {
    font-size: 1rem;
  }
}

.asideGeneral{
            padding-right: 20px;
            padding-bottom: 80px;
    }


  .client-logos-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    /* Or your desired max width for the scroller */
    margin: 1.5rem auto 0 auto;
    /* mt-6 */
    overflow: hidden;
    /* Crucial for the fade effect to work with scrolling content */
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  }

  .client-logos-scroller {
    display: flex;
    width: fit-content;
    /* Important for the animation */
    animation: scrollLogos 25s linear infinite;
  }

  .client-logos-scroller img {
    height: 20px;
    /* Adjust as needed, slightly smaller */
    margin: 0 20px;
    /* mx-5, adjust spacing */
    opacity: 1;
    /* filter: grayscale(100%); */
    vertical-align: middle;
    /* Align logos nicely */
  }


  @media (max-width: 640px) {
  .client-logos-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px;
    /* Or your desired max width for the scroller */

    /* mt-6 */
    overflow: hidden;
    /* Crucial for the fade effect to work with scrolling content */
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  }
   .client-logos-scroller {
    display: flex;
    width: fit-content;
    /* Important for the animation */
    animation: scrollLogos 10s linear infinite;
  }
  .client-logos-scroller img {
    height: 10px;
    /* Adjust as needed, slightly smaller */
    margin: 0 10px;
    /* mx-5, adjust spacing */
    opacity: 1;
    /* filter: grayscale(100%); */
    vertical-align: middle;
    /* Align logos nicely */
  }

  .TextWrap{
        max-width: 135px;
        text-wrap:inherit;
        text-align: center;
        
    }

  .divchatmobile {
    padding-top: 0.5rem;
  }
  .InputMobile{
    padding:0.5rem
  }
  .phoneHeight{
    height: 100%;
    background-size: cover;
    background-position: center;
  }
  .asideGeneral{
padding-top: 60px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
    }
}

  @keyframes scrollLogos {
    0% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(-50%);
      /* Scroll one full set of logos */
    }
  }


.chat-bg {
        /* Define your chat-bg if it's a custom background */
        background-color: #111827;
        /* Example: Tailwind gray-900 */
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* :root 
    .h-\[calc\(100vh-var\(--navbar-height\)\)\] {
        height: calc(100vh - var(--navbar-height));
    } */

    /* Styles for AI message markdown content (scoped to .ai-message-content) */
    .ai-message-content ul,
    .ai-message-content ol {
        list-style-position: inside;
        margin-left: 1rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .ai-message-content ul {
        list-style-type: disc;
    }

    .ai-message-content ol {
        list-style-type: decimal;
    }

    .ai-message-content a {
        color: #818cf8;
        /* Tailwind's indigo-400 */
        text-decoration: underline;
    }

    .ai-message-content a:hover {
        color: #6366f1;
        /* Tailwind's indigo-500 */
    }

    .ai-message-content p {
        margin-bottom: 0.5rem;
    }

    .ai-message-content h1,
    .ai-message-content h2,
    .ai-message-content h3,
    .ai-message-content h4,
    .ai-message-content h5,
    .ai-message-content h6 {
        margin-top: 0.75em;
        margin-bottom: 0.25em;
        font-weight: 600;
    }

    .ai-message-content pre {
        background-color: #1f2937;
        /* gray-800 */
        color: #e5e7eb;
        /* gray-200 */
        padding: 0.75rem;
        border-radius: 0.375rem;
        /* rounded-md */
        overflow-x: auto;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .ai-message-content code {
        background-color: #374151;
        /* gray-700 */
        padding: 0.125rem 0.25rem;
        border-radius: 0.25rem;
        /* rounded-sm */
        font-size: 0.875em;
        /* text-sm */
    }

    .ai-message-content pre code {
        background-color: transparent;
        padding: 0;
        border-radius: 0;
        font-size: inherit;
    }


    .chatMessagecolor {
        background-image: radial-gradient(100% 100% at -9% 0%, rgba(0, 255, 204, 0.01) 0%, rgb(29 132 183 / 25%) 100%);
        background-color: #121212;
    }

    .bg-cs-esg-design-strategy {
        /* ESG Design Strategy */
        background-image: radial-gradient(100% 100% at 50% 0%, rgba(0, 255, 204, 0.01) 0%, rgb(51 206 223 / 25%) 100%);
        background-color: #121212;
    }

  @media (max-height: 720px) {
  .HeaderText {
    font-size: 2rem; /* Or other adjustments */
  }
  .HeaderImage {
    height: 88px;
    width: 88px;
  }
  .subtextElement{
    margin-top: 0.25rem;
  }

  .chatFieldAnimated{
    padding: 0.5rem;
    font-size: 0.8rem;
    margin-inline-start: 8px;
    margin-inline-end: 8px;
  }
  .chatFieldAnimated .inputfield{
    font-size: 0.8rem;
  }
.chatsubtitle{
  font-size: 0.75rem;
}

.asideGeneral{
padding-top: 55px;
    }
}

@media (min-height: 740px) and (max-height:800px) {
  .HeaderText {
    font-size: 3.5rem; /* Or other adjustments */
  }
  .HeaderImage {
    height: 120px;
    width: 120px;
  }
  .subtextElement{
    font-size: 0.8rem;
  }
  .pills{
    font-size: 0.8rem;
  }
  .chatsubtitle{
    font-size: 1rem;
  }
}

.responsive-icon {
  width: 1em; /* Scales with the font size of its container */
  height: auto; /* Maintains aspect ratio defined by viewBox */
  /* or */
  /* width: 10%; */ /* Scales with the parent container's width */
  /* height: auto; */
}

@media (max-width: 600px) {
  .responsive-icon {
    width: 0.8em; /* Smaller on small screens */
  }
}


[x-cloak] {
    display: none !important;
}

