* {
	scroll-behavior: smooth;
	font-family: Montserrat, sans-serif;
}

.voice-bot-demo {
	background-color: #20273C;
	padding: 40px 40px 0;
	border-radius: 26px;
}

.wrapper-content {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.wrapper-voice-bot-demo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between !important;
	height: 261px !important;
}

.select-voice-bot-demo {
	position: relative;
	display: inline-block;
}

.select-voice-bot-demo select {
	width: 260px;
	appearance: none; 
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
	border: 1px solid transparent;
	border-radius: 20px;
	padding: 12px 15px;
	font-size: 16px;
	color: #ffffff; 
	cursor: pointer;
	text-align: center;
	background-color: transparent; 
	background-image: linear-gradient(#20273C, #20273C), linear-gradient(to right, #274A84, #04C6C6);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

.select-voice-bot-demo select:focus {
	outline: none;
}

.select-voice-bot-demo::before {
	content: "▼";
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	font-size: 16px;
	background: linear-gradient(to right, #274A84, #04C6C6);
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
}

.option-vqc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.icon-voice-bot-demo {
	width: 120px;
	height: 120px;
	font-size: 40px;
	display: none !important;
	align-items: center;
	justify-content: center;
	color: #20283C;
	border-radius: 50%;
	background: linear-gradient(to right, #274A84, #09C7C8);
}

.icon-voice-bot-demo.active {
	display: flex !important;
}

.status-voice-bot-demo {
	font-size: 12px;
	color: #FFFFFF;
	font-weight: 400;
}

.line-bottom-voice-bot {
	margin-top: 20px;
	display: inline-block;
	height: 8px;
	width: 100%;
	border-radius: 20px;
	margin-bottom: 20px;
	background: linear-gradient(to right, #274A84, #09C7C8);
}

.wrapper-info-bot-demo {
	flex: 1;
	width: 100%;
	min-height: 261px;
	height: 100% !important;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	overflow-x: scroll;
}

.btns-bot {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 240px;
	max-height: 261px;
	overflow-y: scroll;
}

.wrapper-info-bot-demo::-webkit-scrollbar,
.btns-bot::-webkit-scrollbar { 
  width: 0 !important;
  display: none; 
}

.btn-info-bot-demo {
	color: #fff;
	background: linear-gradient(to right, rgba(39, 74, 132, 1), rgba(9, 199, 200, 1)) !important;
	text-align: center;
	border-radius: 26px;
	width: 100%;
	padding: 12px 0;
	outline: none;
	border: none;
	font-weight: 600;
	font-size: 14px;
}

.btn-info-bot-demo:not(:last-child) {
	margin-bottom: 10px;
}

.btn-info-bot-demo.active {
	background: transparent !important;
	border: 2px solid #fff;
}

.content-info-bot-demo {	
	flex: 1;
	width: 100%;
	background: rgba(7, 13, 27, 1);
	padding: 12px 20px;
	height: 100% !important;
	min-height: 261px;
	border-radius: 20px;
}

.content-info-bot-demo ul {
}

.content-info-bot-demo ul li {
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 12px;
	min-width: 300px !important;
}

.no-gap {
	margin: 0;
}

.response-animation {
    position: absolute;
	background: linear-gradient(to right, rgba(39, 74, 132, 0.24), rgba(9, 199, 200, 0.24));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: ;
    z-index: 0;
    opacity: 0;
}

.book-demo-bot {
	flex: 1;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 217px;
	height: 100%;
}

.book-demo-bot.active {
	display: flex;
}

.transcript-voice-bot i {
	font-size: 14px;
}

.transcript-voice-bot .bot {
	margin-top: 10px;
	color: #fff;
	font-size: 12px;
	line-height: 1.6;
	font-style: italic;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.transcript-voice-bot .user {
	margin-top: 10px;
	color: #fff;
	font-size: 12px;
	line-height: 1.6;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.transcript-voice-bot .user i {
	margin-left: 2px;
}

.transcript-voice-bot .user span {
	margin-left: 4px;
	display: inline-block;
	color: #F8F3BE;
}

.transcript-voice-bot {
	height: 100%;
	max-height: 261px;
	overflow-y: scroll;
	padding-right: 8px;
}

.transcript-voice-bot::-webkit-scrollbar {
    width: 4px;
    background: transparent; 
}

.transcript-voice-bot::-webkit-scrollbar-thumb {
	cursor: pointer;
    background: #D9D9D9; 
    border-radius: 10px; 
    transition: background 0.3s ease;
}

.transcript-voice-bot,
.list-content-info-bot-demo {
	display: none;
}

.transcript-voice-bot.active,
.list-content-info-bot-demo.active {
	display: block;
}

.btn-info-bot-demo.book-demo-bot-btn {
	width: 300px;
	text-align: center;
	background: linear-gradient(to right, rgba(39, 74, 132, 0.5), rgba(9, 199, 200, 0.5)) !important;
	text-transform: uppercase;
	font-weight: 700;
}

.desc-book-demo-bot {
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	text-align: center;
}

.relative {
	position: relative;
	z-index: 2;
}

.response-animation.active {
    animation: pulse 1.1s infinite;
}

.cursor-pointer {
	cursor: pointer;
}

.show {
	display: block;
}

.contact-form-modal-vqc,
.contact-form-modal {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	display: none;
	align-items: center !important;
	justify-content: center !important;
	background-color: rgba(0,0,0,0.5);
	z-index: 99999999999999 !important;
}

.contact-form-modal-vqc .e-con-inner,
.contact-form-modal .e-con-inner {
	width: 75vw;
	max-width: 990px !important;
	height: 42vh !important;
	max-height: 550px !important;
	overflow: hidden;
	background: linear-gradient(to right,rgba(39, 74, 132, 1),rgba(9, 199, 200, 1));
	border-radius: 26px;
	display: flex;
	flex-direction: row !important;
	padding: 20px 20px 0;
	align-items: center !important;
	justify-content: space-evenly !important;
	position: relative !important;
}

.heading-contact-form-vqc,
.heading-contact-form {
	position: absolute;
	top: 25px;
	left: 20px;
	padding-bottom: 20px;
}

.close-icon-contact-form-vqc,
.close-icon-contact-form {
	position: absolute;
	top: 25px;
	right: 20px;
	cursor: pointer;
}

.contact-form-modal-vqc .e-con-inner .elementor-widget-image,
.contact-form-modal .e-con-inner .elementor-widget-image {
	width: 282px;
}
#contact_form_group_vqc .elementor-field-type-text,
#contact_form_group .elementor-field-type-text {
	position: relative !important;
}
#contact_form_group_vqc .elementor-message,
#contact_form_group .elementor-message {
	position: absolute !important;
	bottom: -46px !important;
	font-size: 15px;
}

.wrapper-icon-voice-bot-demo.disable {
    cursor: not-allowed !important;
}

.wrapper-icon-voice-bot-demo.disable .fa-square,
.wrapper-icon-voice-bot-demo.disable .fa-microphone {
    filter: grayscale(40%) brightness(80%); 
}

 @keyframes pulse {
     0% {
         transform: translate(-50%, -50%) scale(0.8);
         opacity: 0.7;
     }

     100% {
         transform: translate(-50%, -50%) scale(2.2);
         opacity: 0.6;
     }
 }

@media screen and (max-width: 1122px) {
	.contact-form-modal-vqc .elementor-widget__width-initial.elementor-widget.elementor-widget-image,
	.contact-form-modal .elementor-widget__width-initial.elementor-widget.elementor-widget-image {
		display: none;
	}
	
	.contact-form-modal-vqc .e-con-inner,
	.contact-form-modal-vqc .elementor-widget.elementor-widget-form,
	.contact-form-modal .e-con-inner,
	.contact-form-modal .elementor-widget.elementor-widget-form  {
		width: 100% !important;
	}
	
	.heading-contact-form-vqc,
	.heading-contact-form {
		top: 80px;
		left: 20px;
    }
	
	.close-icon-contact-form-vqc,
	.close-icon-contact-form {
		right: 20px;
	}
}


@media screen and (max-width: 1024px) {
	.wrapper-content {
		flex-direction: column;
		align-items: center;
	}
	
	.btn-info-bot-demo {
		font-size: 14px;
	}
	
	.transcript-voice-bot,
	.list-content-info-bot-demo li {
		font-size: 10px;
	}

}

@media screen and (max-width: 768px) {
	.transcript-voice-bot {
		padding-left: 10px;
	}

	.contact-form-modal-vqc .e-con-inner,
	.contact-form-modal .e-con-inner {
		height: 52vh !important;
		max-height: 800px !important;
	}
	
	.wrapper-info-bot-demo {
		flex-direction: column;
		align-items: center;
		margin-top: 20px;
		gap: 40px;
	}
	
	.wrapper-voice-bot-demo,
	.select-voice-bot-demo,
	.select-voice-bot-demo-btn,
	.btns-bot {
		width: 100% !important;
	}
	
	.contact-form-modal-vqc .elementor-widget.elementor-widget-form,
	.contact-form-modal .elementor-widget.elementor-widget-form  {
		margin-top: 100px;
		overflow-y: scroll !important;
		overflow-x: hidden !important;
	}
	
}

@media screen and (max-width: 430px) {
	.heading-contact-form-vqc,
	.heading-contact-form {
		top: 60px;
		left: 20px;
    }
	
	.content-info-bot-demo ul li {
		min-width: 200px !important;
	}
	
	.btn-info-bot-demo.book-demo-bot-btn {
		width: 150px !important;
		font-size: 10px !important;
	}
	
	.contact-form-modal-vqc .elementor-heading-title h2,
	.contact-form-modal .elementor-heading-title h2 {
		font-size: 22px !important;
	}
	
	.contact-form-modal-vqc .elementor-widget.elementor-widget-form,
	.contact-form-modal .elementor-widget.elementor-widget-form  {
		margin-top: 150px;
		height: 350px;
		overflow-y: scroll !important;
		overflow-x: hidden !important;
	}
	
}