@font-face {
    font-family: 'Hero New';
    src: url('fonts/HeroNew-Regular.eot');
    src: url('fonts/HeroNew-Regular.otf?#iefix') format('embedded-opentype'),
	     url('fonts/HeroNew-Regular.woff') format('woff'),
         url('fonts/fonts/HeroNew-Regular.woff2') format('woff2'),
         url('fonts/HeroNew-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hero New';
    src: url('fonts/HeroNew-Medium.eot');
    src: url('fonts/HeroNew-Medium.otf?#iefix') format('embedded-opentype'),
	     url('fonts/HeroNew-Medium.woff') format('woff'),
         url('fonts/HeroNew-Medium.woff2') format('woff2'),
         url('fonts/HeroNew-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hero New';
    src: url('fonts/HeroNew-Thin.eot');
    src: url('fonts/HeroNew-Thin.otf?#iefix') format('embedded-opentype'),
	     url('fonts/HeroNew-Thin.woff') format('woff'),
         url('fonts/HeroNew-Thin.woff2') format('woff2'),
         url('fonts/HeroNew-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hero New';
    src: url('fonts/HeroNew-Bold.eot');
    src: url('fonts/HeroNew-Bold.otf?#iefix') format('embedded-opentype'),
	     url('fonts/HeroNew-Bold.woff') format('woff'),
         url('fonts/HeroNew-Bold.woff2') format('woff2'),
         url('fonts/HeroNew-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

html{
	height:100%;
	width:100%;
} 


body {
	background:url("../images/bg.jpg") no-repeat center;
	background-size:cover;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: 'Hero New';
	font-weight: normal;
	font-size: 16px;
	line-height: 1.4;
	color: #0C304F;
	width: 100%;
	height: 100%;
}

h1,h2,h3,h4,h5,h6,ul,ol,ul li,ol li{padding:0; margin:0; font-weight:normal; list-style:none;}

img{max-width:100%;}

b{font-weight:bold;}

.container_wrapper{width:1360px; margin:0 auto; height:100%;}
.header_sec{float:right;}
.header_sec .bot_icon{float:right; background:#0C304F; cursor:pointer; width:60px; height:60px; border-radius:10px; margin:5px; transition:0.5s all;}
.header_sec .bot_icon:hover{background:#3836b2;}
.header_sec .bot_icon img{margin:1px 5% 5px 5%; width:90%;}

.main_sec{width:calc(100% - 70px); height:100%;}
.content_sec{width:35%; padding:20px 1%; font-size:20px; float:left;} 
h1{font-size:30px; font-weight: bold;}
.star{width:28px; position:relative; left:5px; top:10px;}

.chatbot_sec{width:61%; padding:20px 1%; float:left; height:100%;}
.chatbot_area{background: rgb(2,0,36); background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(225,235,240,1) 0%, rgba(239,247,249,1) 100%); margin:4% 2% 2% 2%; height:88%; width:96%; border-radius:20px; box-shadow:0 0 15px rgba(0,0,0,0.2);}
.chatbot_top{background:#fff; width:94%; text-align:right; line-height:3; position:relative; z-index:1; font-size:20px; height:50px; float:left; padding:5px 3%; border-radius:20px 20px 0 0; box-shadow:0 1px 5px rgba(0,0,0,0.2); font-weight:500;}
.chatbot_top i{font-weight:100; color:#ababab;}
.chatbot_top .robo{width:50px; position:relative; bottom:2px; float:right;}
.chatbot_footer{float:left; width:100%;}
.chatbot_footarea{width:80%; height:50px; padding:8px 20px; margin:15px auto; background:#fbfbfb; box-shadow:0 1px 10px rgba(0,0,41,0.2); border:2px solid #fff; border-radius:54px; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);}
.chatbot_plusicon{width:24px; float:left; font-size:30px; margin:5px 25px 0 5px; color:#0B2F4E;}
.chatbot_micicon{width:24px; float:left; font-size:30px; margin:5px 5px 0 25px; color:#0B2F4E;}
.chatbot_txtsec{width:calc(100% - 120px); height:40px; float:left; padding:5px 0 5px 20px; background:#fff; box-shadow:0 1px 20px rgba(0,0,41,0.1); border-radius:50px;}
.chatbot_txtsec textarea{width:calc(100% - 80px); font-family:'Hero New'; font-weight:normal; overflow-y:auto; resize:none; float:left; border:none; font-size:16px; color:#0C304F; padding:7px 10px; height:24px;}
.chatbot_txtsec .send{width:50px; padding:0 5px; color:#999; font-size:30px; float:left; text-align:center; transition:0.5s all;cursor:pointer;}
.chatbot_txtsec .send.enable{width:50px; padding:0 5px; cursor:pointer; color:#C21E5B; font-size:30px; float:left; text-align:center; transition:0.5s all;}
.chatbot_txtsec .send.enable:hover{color:#0C304F;cursor:pointer;}
.plusicon{width:44px;; float:left; margin:4px 10px 0 0;}
.micicon{width:44px;; float:left; margin:4px 0 0 11px;}
.chatbot_txtsec textarea:focus{outline:0;}

.chatbot_cont.expand{height:calc(100% - 210px);}
.chatbot_footarea.expand{height:100px; border-radius: 100px;}
.chatbot_footarea.expand .chatbot_txtsec{height:90px; border-radius: 100px;}
.chatbot_footarea.expand .chatbot_txtsec textarea{height:74px;}
.chatbot_footarea.expand .chatbot_txtsec .send{margin:23px 0 0 0;}
.chatbot_footarea.expand .expandicon .contracticon{margin-top:32px;}
.chatbot_footarea.expand .refreshicon{margin-top:28px;}

.chatbot_cont {float:left; width:100%; height:calc(100% - 160px); overflow-y:auto; padding:20px; box-sizing: border-box;}
.chatbot_cont .bot_response{float:left; width:90%; margin:10px 0;}
.chatbot_cont .bot_response .bot_img{width:40px; height:40px; float: left; padding:0 0 3px 0; background:rgba(241,242,244,0.2); border-radius:10px; box-shadow:0 2px 3px #e2e5e6;}
.chatbot_cont .bot_response .bot_cont{width:calc(100% - 60px); margin-left:60px;}
.chatbot_cont .user_reply{float:right; margin:10px 0;}
.chatbot_cont .user_reply .user_img{width:40px; visibility:hidden; height:40px; float: right; padding:0 0 3px 0; background:rgba(241,242,244,0.2); border-radius:10px; box-shadow:0 2px 3px #e2e5e6;}
.chatbot_cont .user_reply .user_cont{width:calc(100% - 100px); margin:0 20px 0 40px; float:left;}
.chatbot_cont .user_reply .user_cont p{background:#fff; margin:10px 0; float:right; text-align:right; padding:15px 20px; border-radius:15px; width:auto; margin:0 0 20px 0;}
.chatbot_cont .bot_response .bot_img.preloader{width:60px; height:24px; margin:10px 0 0 0; border-radius:6px; overflow:hidden;}
.ai_txt {
	float: left;
	width: 100%;
	word-wrap: anywhere;
}
iframe{width:100%; height:100%; border:none;}
.refreshicon {
  width: 44px;
  float: left;
  margin: 4px 0 0 0;
  cursor:pointer;
}
.expandicon{
  width: 34px;
  float: left;
  margin: 8px 5px 0 15px;
  cursor:pointer;
}
.contracticon{
  width: 34px;
  float: left;
  margin: 33px 5px 0 15px;
  cursor:pointer;
}
@media only screen and (max-width:1400px) {
  .container_wrapper{width:100%;}	 
}
.hide{
	display: none;
}