.askmitoto-banner-txt .orange-btn img{max-width: 130px; position: relative; top: -1px; margin-left: 8px;}
.askmitoto-banner-txt .orange-btn{background-color: transparent; border: 1px solid #A020F0; color: #000; font-size: 18px; padding: 12px 40px;}
.askmitoto-banner-txt .orange-btn svg path{fill: #000;}
.new-inner-banner-section .banner-text h1{color: #A020F0;}
.mitoto-dashbord-section .row{margin-top: 70px; padding: 15px; margin-left: 0; margin-right: 0; box-shadow: 0 0 5px 1px #ccc; border-radius: 10px;}
.mitoto-dashbord-section h2{font-family: 'Rubik'; font-weight: 600; font-size: 36px; margin-bottom: 20px;}
.mitoto-dashbord-section h4{font-family: 'Poppins';font-weight: 600; font-size: 15px; margin-bottom: 15px; text-align: justify;}
.mitoto-dashbord-section p{font-family: 'Poppins';font-weight: normal; font-size: 15px; text-align: justify;}
.mitoto-dashbord-section .blue-btn{background-color: #0442fe; transition: .2s ease-in-out; color: #fff; box-shadow: 0 -4px 4px #00000040 inset, 0 8px 5px #ffffff40 inset; font-size: 16px; font-family: var(--poppins-font); font-weight: 600; padding: 16px 40px; border-radius: 50px; display: inline-block;}
.mitoto-dashbord-section .blue-btn:hover{text-decoration: none; background-color: #a020f0; color: #fff; transform: scale(1.05);}
.mitoto-features{padding-top: 70px;}
.mitoto-features h2{font-family: 'Rubik'; font-weight: 600; font-size: 36px; margin-bottom: 20px; text-align: center;}
.mitoto-features .title-txt{font-family: 'Poppins';font-weight: normal; font-size: 15px; text-align: center; margin-bottom: 30px;}
.mitoto-features .col-lg-4{margin-bottom: 30px;}
.mitoto-features .feature-box{border: 2px solid #80808066; padding: 30px; border-radius: 15px; height: 100%;}
.mitoto-features .feature-box h3{font-family: 'Poppins';font-weight: 600; font-size: 18px; margin: 15px 0;}
.mitoto-features .feature-box p{font-family: 'Poppins';font-weight: normal; font-size: 15px; margin-bottom: 0;}
.mitoto-faq{padding-top: 50px; padding-bottom: 30px; width: 100%;}
.mitoto-faq h2{font-family: 'Rubik'; font-weight: 600; font-size: 36px; margin-bottom: 30px; text-align: center;}
.mitoto-faq .faq-gredient{background: linear-gradient(90deg, #003ffe, #003ffe 35%, #a420e6 61%, #e27701); padding: 5px; border-radius: 12px;position: relative;}
.mitoto-faq .faq-gredient:before { content: ""; background: #7b40ec; height: 30px; width: 30px; position: absolute; top: -25px;clip-path: polygon(50% 0%,0% 100%,100% 100%); left: 50%;}
.mitoto-faq .faq-gredient:after { content: ""; background: #fff; height: 20px;width: 20px;position: absolute;top: -14px; clip-path: polygon(50% 0%,0% 100%,100% 100%); left: 50.4%;}
.mitoto-faq .accordion{background-color: #fff; border-radius: 10px;}
.mitoto-faq .card{border: 0; background-color: transparent; border-radius: 0; border-bottom: 3px solid #80808066 !important;}
.mitoto-faq .card .card-header{background-color: transparent; border: 0; border-radius: 0; padding: 0 !important;}
.mitoto-faq .card .card-header button{font-size: 16px !important; position: relative; font-family: 'Poppins'; font-weight: 600; color: #003ffe; padding: 22px 30px !important;}
.mitoto-faq .card .card-body{padding: 0 30px;}
.mitoto-faq .card .card-body p{font-family: 'Poppins';font-weight: normal; font-size: 15px;}
.mitoto-faq .card:last-child{border-bottom: 0 !important;}
.mitoto-faq .card .card-header button.collapsed{color: #000;}
.mitoto-faq .card .card-header button::after{display: none !important;}
.mitoto-faq .card .card-header button.collapsed::before{content: ''; position: absolute; right: 10px; top: 22px; background: url('../product/product-img/faq-plus.png') no-repeat; height: 25px; width: 25px; background-size: 25px;}
.mitoto-faq .card .card-header button::before{content: ''; position: absolute; right: 10px; top: 22px; background: url('../product/product-img/faq-minus.png') no-repeat; height: 25px; width: 25px; background-size: 25px;}
.mitoto-blog h2 span{color: #0442fe !important;}
.askmitoto-banner-txt p{max-width: 80%;}

/* -------chatbot-animation----- */
.chatbot { background: transparent;}
#chat { font-family: 'Poppins'; overflow: hidden;}
.user-row { margin-bottom: 20px;}
.user-row .answer-div { display: flex; justify-content: flex-end; gap: 8px;}
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: #90caf9; display: flex; align-items: center; justify-content: center;}
.user-avatar img { height: 32px; width: 32px; border-radius: 50%;}
.user-message { text-align: left; background: #7059ff; color: #fff; padding: 10px 14px; border-radius: 5px; max-width: 90%; font-size: 13px; position: relative;}
.user-message:before { content: ""; position: absolute; top: 0; right: -9px; width: 20px; height: 16px; background: url(../product/product-img/blue-shape-right.svg) no-repeat; background-size: cover;}
.dots { display: flex; justify-content: center; background: #7059ff; padding: 10px 14px; border-radius: 5px; position: relative; margin-left: 5px;}
.dots span { margin-right: 5px;  display: flex;  align-items: center;  animation: blink 1.4s infinite both;  height: 17px;}
.dots span img { height: 10px; width: 10px;}
.user-message .dots { padding: 0;}
@keyframes blink { 0% { opacity: .2 } 20% { opacity: 1} 100% { opacity: .2}}
.loader-main { display: flex; justify-content: center;}
.chat-container {position: relative;}
.chat-loader {display: flex;align-items: center;gap: 6px;z-index: 2;}
.bot-message { margin-left: 5px; font-size: 14px; will-change: transform; width: 100%; max-width: 93%;}
.bot-message::-webkit-scrollbar { display: none;}
.dots::before { content: ""; position: absolute; top: 0; left: -10px; width: 16px; height: 16px; background: url(../product/product-img/message-blue-curve.svg) no-repeat; background-size: cover;}
.chatbot .loader { display: flex; align-items: flex-start;}
.bot-answer-row { display: flex; align-items: flex-start; width: 100%;}
.answer-main-row .markdown-wrapper { background-color: #000; position: relative; border-radius: 10px; width: 700px;}
.answer-main-row .markdown-wrapper .dark-mark-wrap { color: #fff; text-align: left; width: 90%;}
.answer-main-row .markdown-wrapper .dark-mark-wrap .sky-color { color: #66d9ef;}
.answer-main-row .markdown-wrapper .dark-mark-wrap .blue-color { color: #ae81ff;}
.answer-main-row .markdown-wrapper .dark-mark-wrap .yellow-color { color: #e4e729;}
.answer-main-row .markdown-wrapper .copy { position: absolute; right: 8px; top: 6px; color: #888; display: flex; cursor: pointer;}
.answer-main-row .markdown-wrapper .language-sql { white-space: nowrap; padding: 8px; overflow: auto; scrollbar-width: thin; scrollbar-color: #7059ff #f1f1f1;}
.answer-main-row .markdown-wrapper .language-sql::-webkit-scrollbar { width: 1px;}
.answer-main-row p {text-align: left;font-size: 13px; margin: 8px 0;}
.answer-main-row h3 { text-align: left; font-size: 18px; margin: 12px 0;}
.answer-main-row h4 { text-align: left;font-size: 13px; margin: 12px 0;}
.table-wrapper { margin-bottom: 20px;}
.table-wrapper table { width: 100%; border-collapse: collapse; margin-top: 1rem; box-shadow: 0 2px 6px #0000001a; background-color: #fff; margin-bottom: 12px;}
.table-wrapper table th { background-color: #f8f9fa; font-size: 13px; border: 1px solid #dee2e6; padding: 6px 8px; font-family: 'Poppins'; font-weight: 600; text-align: left;}
.table-wrapper table td { border: 1px solid #dee2e6; font-size: 13px; font-family: 'Poppins'; font-weight: normal; padding: 6px 8px; text-align: left;}
.answer-main-row ul { padding-left: 28px;}
.answer-main-row ul li { text-align: left; list-style: circle;}
.answer-main-row .actions { text-align: left; margin-top: 20px;}
.answer-main-row .actions .action-btn { background-color: #7059ff; cursor: pointer; color: #fff; border: 0; border-radius: 5px; margin-right: 10px; font-size: 12px; font-weight: 500; padding: 5px 10px; font-family: 'Poppins';}
.answer-main-row .actions .action-btn svg { max-width: 12px; height: auto;}
.answer-main-row .actions .action-btn svg path { fill: #fff;}
.chatbot-followup { background-color: #ededed;padding: 10px;border-radius: 10px; margin-top: 15px;}
.chatbot-followup h5 {color: #000;font-size: 16px;font-family: 'Poppins';font-weight: 600; margin: 0; text-align: left; margin-bottom: 5px;}
.chatbot-followup ul li { color: #000; font-size: 13px; font-family: 'Poppins'; font-weight: normal; list-style: none; display: inline-block; border: 1px solid #d5d5d5; padding: 5px; border-radius: 5px; text-align: left; margin-bottom: 8px; margin-right: 8px;}
.chatbot-followup ul {padding: 0; margin: 0; text-align: left;}
.chatbot-followup ul li img { max-width: 16px; margin-right: 2px; position: relative; top: 4px;}
.chat-container {max-height: 470px !important; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;}
.chat-container::-webkit-scrollbar { display: none;}
.chat-container img { width: 100%;}
.bot-message .dashboard { width: 100%; background-color: #EEEEEE; padding: 8px; border-radius: 8px;}
.bot-message .dashboard .top-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;}
.bot-message .dashboard .top-row .card.small { width: 19%;}
.bot-message .dashboard .card h4 { font-size: 10px; font-family: 'Poppins'; font-weight: 600; color: #313C78; margin-bottom: 8px; margin-top: 0;}
.bot-message .dashboard .metric { font-size: 16px; font-family: 'Poppins'; font-weight: 700; margin-bottom: 4px;}
.bot-message .dashboard .green { color: #16a34a; font-size: 10px}
.bot-message .dashboard .red { color: #ef4444; font-size: 10px}
.bot-message .dashboard .blue { color: #6366f1; font-size: 10px}
.bot-message .dashboard .green span, .bot-message .dashboard .blue span, .bot-message .dashboard .red span { color: #AEB8D6;}
.bot-message .dashboard .middle-row { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 8px;}
.bot-message .dashboard .middle-row .card.large6 {width: 50%;}
.bot-message .dashboard .middle-row .card h4 { font-size: 13px;}
.bot-message .dashboard .legend { display: flex; gap: 18px; font-size: 12px; justify-content: center;}
.bot-message .dashboard .month-wise .dot { border-radius: 0;}
.bot-message .dashboard .bottom-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between;}
.bot-message .dashboard .bottom-row .top-card-row { width: 58%; display: flex; justify-content: space-between; gap: 8px;}
.bot-message .dashboard .bottom-row .bottom-card-row { width: 40%;}
.bot-message .dashboard .bottom-row .top-card-row .card { width: 50%;}
.bot-message .dashboard .top-card-row .apexcharts-canvas, .bot-message .dashboard .top-card-row .pieCanvas { width: 100% !important; height: auto !important;}
.bot-message .dashboard .mainChart { min-height: auto !important;}
.bot-message .dashboard .card { background: #fff; border-radius: 8px; padding: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .04);}
.bot-message .dashboard .legend span { display: flex; align-items: center; gap: 6px;}
.bot-message .dashboard .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block;}
.bot-message .dashboard .country-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.bot-message .dashboard .country-legend { display: flex; flex-direction: column; gap: 12px; font-size: 13px; font-weight: 500;  color: #6b7a99;}
.bot-message .dashboard .country-legend div { display: flex; align-items: center; gap: 8px;}
.mitoto-dashbord-section{width: 100%;}

@media(max-width: 1599px){
    .askmitoto-banner-txt .carousel-inner { padding-top: 60px;}
}
@media(max-width: 1399px){
    .mitoto-dashbord-section p,.mitoto-dashbord-section h4{font-size: 14px;}
    .askmitoto-banner-txt .carousel-inner { padding-top: 30px;}
    .chat-container {max-height: 460px !important;}
    .bot-message .dashboard .top-row .card.small { width: 18.9%;}
}
@media(max-width: 1199px){
    .bot-message .dashboard .top-row .card.small { width: 18.7%;}
}
@media(max-width: 991px){
    .bot-message .dashboard .top-row .card.small { width: 18.9%;}
    .mitoto-dashbord-section .blue-btn {margin-bottom: 40px;}
    .mitoto-dashbord-section .row-reverse{flex-direction: column-reverse;}
}
@media(max-width: 767px){
    .askmitoto-banner-txt .carousel-inner { padding-top: 0;}
    .new-inner-first-section .mt-60{margin-top: 0 !important;}
    .askmitoto-banner-txt p { max-width: 100%;}
    .mitoto-dashbord-section{padding: 0 15px; width: 100%;}
    .mitoto-dashbord-section h2 { font-size: 26px; margin-bottom: 15px;}
    .answer-main-row .markdown-wrapper { width: 95%;}
    .table-wrapper { overflow-y: auto; scrollbar-width: thin;}
    .table-wrapper table th, .table-wrapper table td {  white-space: nowrap; }
    .answer-main-row .markdown-wrapper .dark-mark-wrap { width: 75%;}
    .user-message {  max-width: 86%; }
    .answer-main-row .markdown-wrapper .language-sql, .answer-main-row .markdown-wrapper .copy, .answer-main-row ul li, .chatbot-followup ul li { font-size: 10px; }
    .answer-main-row p, .chatbot-followup h5 { font-size: 11px; }
    .answer-main-row h3 { font-size: 13px;}
    .table-wrapper table td, .table-wrapper table th { font-size: 10px; padding: 3px 5px;}
    .answer-main-row .actions .action-btn { margin-right: 5px; font-size: 10px; padding: 4px 6px; }
    .bot-message .dashboard .top-row .card.small, .bot-message .dashboard .middle-row .card.large6, .bot-message .dashboard .bottom-row .top-card-row .card { width: 100%;}
    .bot-message .dashboard .middle-row, .bot-message .dashboard .bottom-row, .bot-message .dashboard .bottom-row .top-card-row { width: 100%; flex-direction: column; }
    .bot-message { width: 90%;}
    .bot-message .dashboard .bottom-row .bottom-card-row { width: 100%;}
    .mitoto-faq h2 {font-size: 26px;}
    .mitoto-faq .faq-gredient:after {left: 51.2%;}
    .mitoto-faq .card .card-header button { padding: 16px 20px !important;}
    .mitoto-faq .card .card-body { padding: 0 20px;}
    .mitoto-faq .card .card-header button::before { right: 4px; top: 18px; height: 20px; width: 20px; background-size: 20px;}
    .mitoto-faq .card .card-header button.collapsed::before { right: 4px;top: 18px; height: 20px; width: 20px; background-size: 20px;}
    .mitoto-features h2 {font-size: 26px; max-width: 90%; margin: 0 auto; margin-bottom: 15px;}
    .mitoto-features .title-txt { max-width: 90%; margin: 0 auto; margin-bottom: 20px;}
    .mitoto-features .feature-box { padding: 20px;}
    .mitoto-dashbord-section .blue-btn { font-size: 15px; padding: 14px 35px;}
    .mitoto-dashbord-section .row { margin-top: 50px; padding: 15px 0;}
    .mitoto-faq { padding-top: 30px;}
}