@import url('https://fonts.googleapis.com/css2?family=Rajdhani');


@media screen and (max-width: 576px) {
    p {
      font-size: 12px; /* Adjust the font size for smaller screens */
    }
  }
  

  h1.mb-3.text-center {
    color: white;
    font-family: 'Rajdhani';
    font-size: 6vw;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the alpha value (0.5 for 50% transparency) */
    padding: 20px; /* Adjust padding as needed */
    margin: 0; /* Remove default margin */
}

@media screen and (max-width: 576px) {
    h1.mb-3.text-center {
        font-size: 10vw; /* Adjust font size for smaller screens */
    }
}

@media screen and (max-width: 576px) {
    .blockquote-footer {
      font-size: 10px; /* Adjust the font size for smaller screens */
    }
  }

  .container .blockquote p,
    .container .blockquote-footer {
        color: white;
        
    }


    .background-container {
        position: relative; /* Ensure the container can position its children */
        height: 50vh; /* Set the height to 100% of the viewport height */
        width: 100%; /* Set the width to 100% */
        display: flex; /* Use flexbox */
        flex-direction: column; /* Stack items vertically */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
    }
    
    

.background-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers the container */
    z-index: -1; /* Place the image behind other content */
}

#chat-btn .fas {
    font-size: 60px; /* Adjust the font size as needed */
}

.social-icon {
    color: black;
    font-size: 30px; /* Adjust the font size as needed */
}

#chat-btn {
    position: relative;
    padding: 0; /* Remove padding to prevent extra space */
}

.chat-label {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    font-size: 15px; /* Adjust font size as needed */
    color: white; /* Set the color of the label */
}

.message {
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
    display: inline-block; /* Ensure background size changes dynamically */
    max-width: 80%; /* Set maximum width for message blocks */
    word-wrap: break-word; /* Allow long words to wrap */
}

.user-message {
    background-color: #007bff;
    color: white;
    margin-left: auto; /* Bring user messages all the way to the right */
    display: block; /* Display user messages on a separate line */
    width: fit-content; /* Adjust width dynamically based on content */
}

.bot-message {
    background-color: #f0f0f0;
    color: black;
    text-align: left; /* Align bot messages to the left side */
    display: block; /* Display bot messages on a separate line */
    width: fit-content; /* Adjust width dynamically based on content */
}

 /* CSS animation for animated dots */
 @keyframes dotAnimation {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}

/* Style for the animated dots */
.animated-dots {
    color: red; /* Just to verify if the animation is applied */
}

.animated-dots::after {
    content: '';
    animation: dotAnimation 1s infinite; /* Apply the animation */
}