.sec-outer{ float: left; width:100%;  position: relative; min-height: 100vh; }

.embed-bg-sec{
    width: 100%;
    height:600px;
    overflow: hidden;
    -webkit-transform: skewY(-7deg);
    transform: skewY(-7deg);
    -webkit-transform-origin: 0;
    transform-origin: 0;
    background-color: #f2f2f2; /* For browsers that do not support gradients */
   background-image: linear-gradient(-45deg, #dcdcdc, #eeeeee, #ffffff, #dad9d7);
    min-height: 600px;
   animation: gradient 15s ease infinite;
   background-size:400% 200%; 
   position: absolute;
top:0;

}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

h1 {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: normal;
    font-size: 42px;
    line-height: 1.3;
    letter-spacing: 0.005em;
    color: #444444;
    float: left;
    width: 100%; text-align: center; position: relative;margin-top:150px !important;
}

h3 {
    color: #444444;
    opacity: 0.8;
    font-size: 20px;
    float: left;
    width: 100%;
    margin-bottom: 0!important;
    margin-top: 0 !important;
    /* text-align: left !important; */
     line-height: 1.4;
     text-align: center;
}

h2{font-family: Ubuntu;font-style: normal; color: #666666; font-weight: 500;  font-size: 20px;  line-height: 1.4;float: left; width: 100%;padding: 10px 20px 10px 20px !important;
    margin-bottom: 0;}
h4{font-family: Ubuntu;font-style: normal; font-weight: normal;   color: #666666; font-size: 13px; line-height: 1.4; float: left; width: 100%; padding: 0 20px !important; margin-bottom: 20px !important;}
.full-outer .wrapper{ margin: 0 auto; margin-top:50px; width:1100px; position: relative; background: none !important;}
.full-outer{ float: left; width: 100%;}
.inner-half-outer{ float: left; width: 50%; padding: 10px;}
.inner-25{ float: left; width: 25%; padding: 10px;}
.inner-75{ float: left; width: 75%; padding: 10px;}
.card-bg{float: left; width: 100%; background: #F3F4F5;    border: 1px solid #F2F2F2; min-height: 400px;-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px; position: relative;}
.card-bg img{ width: 100%;}
.card-bg img.space{ margin: 40px 0;}

.card-bg .bot-circle{ width:90% !important; position: absolute !important; height: auto !important; z-index: 99 !important;}
.card-bg.chat .bot-circle{ width:26% !important; position: absolute !important; height: auto !important; left:calc(100% - 60%) !important;}
.card-bg .og-chat-tooltip{ padding: 10px !important;}
.card-bg.chat .og-chat-tooltip{ padding: 15px !important; width: 120px !important;}
/* .card-bg.chat .og-chat-tooltip span.og-chat-cross{ display: none;} */

.card-bg .og-chat-tooltip p{ font-size: 13px!important; line-height:1.4; margin-bottom: 0; }
.card-bg .og-chat-tooltip p span{ font-size: 13px !important;font-weight: 700;top: initial; }
.card-bg section.barEmbed{position: absolute; z-index: 9999!important;}
.card-bg section.barEmbed a.greet-popup-open{ padding: 5px 10px !important; max-width: 100% !important; color:#666 !important;}
.card-bg section.barEmbed p{font-size: 13px !important; color: #fff!important;}

.bottom-sec{position: absolute; bottom: 0; left: 0; width: 100%;}
.img-with-outer{border: 1px solid #F2F2F2;box-sizing: border-box; filter: drop-shadow(0px 0px 20px rgba(78, 66, 66, 0.25)); margin:10px;}
.card-margin-1{ margin: 20px 15px !important; padding: 20px 0 !important; min-height: 130px; background: #f2f2f2;}
.card-margin-2{margin-top: 40px;}
.card-margin-3{ margin: 85px 15px 20px 15px !important; padding: 20px 0 !important; min-height: 130px; background: #f2f2f2;}
.card-margin-4{margin-top: 40px;}
.card-margin-5{ margin: 85px 15px 20px 15px !important; padding: 20px 0 !important; min-height: 130px; background: #f2f2f2; position: relative;}
.card-margin-5 section.sidenote.barEmbed{padding:0 8px 0 10px !important ; top:31%!important; width: 130px!important ; right:-70px !important; height:48px; opacity: 0;}

.card-margin-5 section.barEmbed p{padding: 0 !important;}
.chat .chat-outer{ float: left; width: 100%; position: relative; min-height: 170px;}
.full-embed-outer{ float: left; width: 100%; height:100vh;overflow: hidden; position: absolute; top:0; left:0; display:none; z-index: 9999 !important;  background: #fff;}
.full-embed-outer iframe{ float: left; width: 100%; min-height: 100vh;}



.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce), print {
    .animate__animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
    }
    .animate__animated[class*="Out"] {
        opacity: 0;
    }
}

.card-bg:hover{ box-shadow:0px 3px 5px 2px rgba(0, 0, 0, 0.2); transition:all .5s;}
.card-bg.g-bar .barEmbed.animate__animated {opacity: 0;;}
.card-bg.g-bar:hover .barEmbed.animate__animated{-webkit-animation-name: slideInDown;
    animation-name: slideInDown; opacity: 1;}

.card-bg.ani-cta .popup-outer.animate__animated{opacity: 0;}
.card-bg.ani-cta:hover .popup-outer.animate__animated{ opacity:1; -webkit-animation-name: zoomIn;
    animation-name: zoomIn;}

/* .card-bg.side-note .sidenote.animate__animated{opacity: 0;}     */
section.greet_popup{right:70px;}
.card-bg.side-note:hover .sidenote.barEmbed{right: -58px!important;  transition:all .5s; opacity: 1;}

section.sidenote.barEmbed:hover{right: initial!important;}

/* .full-page-view{position: fixed;
    height: 100vh;
    width: 100%;
    z-index: 999;
    top: 0;
    border: 0;
    overflow: hidden;}

.full-page-view-close{ font-size: 20px; font-weight: bold; color:#666; position: absolute;
    top: 13px;
    right: 13px;
    z-index: 9999;} */