.main-logo img
{
padding:10px 0px;
}
header
{
position: sticky;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.3);
z-index: 100;
}
body
{
min-height: 100vh;
font-family: 'Montserrat', sans-serif;
background-color: #f0f1ec;
}
#chatWindowBody {
background-color: #f0f1ec !important;
background-image: url("") !important;
}
#chatWindowHeader {
display: none !important;
}
.bot-chat-bubble {
background-color: #00adf3 !Important;
color: white !important;
}
.hero {
min-height: 90vh;
display: -webkit-flex;
-webkit-align-items: center;
display: flex;
align-items: center;
}
.hero-content p
{
font-size:32px;
font-family: 'Montserrat', sans-serif;
font-weight:500;
}
.hero-content h1
{
font-size:32px;
font-family: 'Montserrat', sans-serif;
font-weight:500;
}
.hero-content h1 b
{
color:#ef0146;
}
.hero-content button
{
font-family: 'Montserrat', sans-serif;
font-weight:700;
border-radius:4px;
background-color:#00ade4;
color:#fff;
padding:10px 20px;
border:1px solid #00ade4;
font-size:18px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
footer
{
color:#fff;
background-color:#000000;
}
@media only screen and  (min-width: 1024px)
{
#chatbox-container {
right: 9% !important;
    width: 50% !important;
    box-shadow: none !important;
    margin: auto;
    right: 0% !important;
    right: 0% !important;
    margin-bottom: 25px !Important;
    position: relative !important;
    height: 547px !important;
   
    display: block;
    text-align: center;
    margin: auto !important;
     margin-top: 28px !important;
}
}
@media only screen and  (max-width: 1024px)
{
#chatbox-container {
width: 70% !important;
box-shadow: none !important;
margin: auto;
display: flex;
right: 13% !important;
margin-bottom:10px !Important;
position:relative !important;
margin-top:40px !important;
z-index:99 !important;
height:500px !important;
}
}
@media (max-width:600px)
{
    .hero-content button {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    border-radius: 4px;
    background-color: #00ade4;
    color: #fff;
    padding: 10px 20px;
    border: 1px solid #00ade4;
    font-size: 15px;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
}
.hero-content
{
   
   position: relative;
    top: 100px;
    background-image: url(./img/mobile_text.png);
    padding: 20px;
}
.hero
{
background: url(./img/omni_mobile_banner.jpg)center no-repeat !important;
background-size: cover;
height: 400px !important;
    min-height: auto !important;

display: -webkit-flex;
-webkit-align-items: center;
display: flex;
align-items: center;
position:relative;
margin-top:-2%;
  
}
}
@media (min-width:601px)
{
.hero
{

background: url(./img/omni_covid_banner.jpg) bottom center no-repeat; background-size: cover;
}
}
@media only screen and (max-width: 480px), (max-height: 480px)
{
    
.hero-content p {
font-size: 20px;
text-shadow: 0 1px 0 #fff;

}
.hero-content h1 {
font-size: 22px;
text-shadow: 0 1px 0 #fff;
margin-top:0px;
}
#chatbox-container {
position: relative !important;
bottom: 0;
top: 18% !important;
left: 0px !important;
right: 1%;
box-shadow: 0 5px 25px 0 rgba(0,0,0,.23);
transition: all .5s ease-in-out;
height:500px !important;
z-index:1!Important;
margin-top:15px !important;
}
#chatbox-container {
width: 95% !important;
box-shadow: none !important;
margin: auto;
display: flex;
right: 13% !important;
margin-bottom:10px !Important;
}
}
@media (max-width:1024)
{
#chatbox-container {
position: relative !important;
bottom: 0;
top: 18% !important;
left: 4px !important;
right: 1%;
box-shadow: 0 5px 25px 0 rgba(0,0,0,.23);
transition: all .5s ease-in-out;
height:500px !important;
z-index:-1 !Important;
margin-top:40px !important;
}  
}
@media only screen and (min-width:767px) and (max-width:1199px)
{
    .hero
    {
        background-position:85%;
    }
}