@charset "UTF-8";
/*------------------------------------------------------------------
Common Stylesheet

Project:   Dope - Multipurpose Bootstrap4 Template
Build:     Bootstrap 4 +
Author:    F4H3M

-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]

1.  Common Styles
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Elements
3.  Menu 
4.  Hero
5.  Home
6.  Price
7.  Points
8.  Feature
9.  Brands
10. Review
11. Execution
12. Accordian
13. Carusel
14. Request Demo
15. Blog
16. Contact
17. Footer

-------------------------------------------------------------------*/
/* =================================== */
/*  Font Family and Colors Styles
/* =================================== */
/* =================================== */
/*  Basic Style
/* =================================== */
::-moz-selection { /* Code for Firefox */
  background-color: #000;
  color: #fff;
}

::selection {
  background-color: #000;
  color: #fff;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #777777;
  font-weight: 300;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #777777;
  opacity: 1;
  font-weight: 300;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #777777;
  opacity: 1;
  font-weight: 300;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #777777;
  font-weight: 300;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #777777;
  font-weight: 300;
}

body {
  color: #333333;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.625em;
  position: relative;
}

ol {
  font-size: 18px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

select {
  display: block;
}

figure {
  margin: 0;
}

a {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

iframe {
  border: 0;
}

a, a:focus, a:hover {
  text-decoration: none;
  outline: 0;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
  text-decoration: none;
  outline: 0;
}

.card-panel {
  margin: 0;
  padding: 60px;
}

/**
 *  Typography
 *
 **/
.btn i, .btn-large i, .btn-floating i, .btn-large i, .btn-flat i {
  font-size: 1em;
  line-height: inherit;
}

.gray-bg {
  background: #f9f9ff;
}

h1, h2, h3,
h4, h5, h6 {
  font-family: "Poppins", sans-serif;
  color: #222222;
  line-height: 1.2em !important;
  margin-bottom: 0;
  margin-top: 0;
  font-weight: 600;
}

.h1, .h2, .h3,
.h4, .h5, .h6 {
  margin-bottom: 0;
  margin-top: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #222222;
}

h1, .h1 {
  font-size: 36px;
}

h2, .h2 {
  font-size: 29px;
  margin-bottom: 16px;
}

h3, .h3 {
  font-size: 24px;
}

h4, .h4 {
  font-size: 22px;
}

h5, .h5 {
  font-size: 18px;
}

h6, .h6 {
  font-size: 14px;
}

td, th {
  border-radius: 0px;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clear::before, .clear::after {
  content: " ";
  display: table;
}
.clear::after {
  clear: both;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.text-italic {
  font-style: italic;
}

.text-white {
  color: #fff;
}

.text-black {
  color: #000;
}

.transition {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.section-gap-2x-full {
  padding-top: 200px;
  padding-bottom: 200px;
}

.section-gap-full {
  padding-top: 120px;
  padding-bottom: 120px;
}

.section-gap-top-180-bottom-60 {
  padding: 180px 0 60px 0px;
}

.section-gap-half {
  padding-top: 75px;
  padding-bottom: 75px;
}

.support-section.section-gap-half {
  padding: 55px 0 !important;
}

.section-gap-quarter {
  padding: 40px 0;
}

.section-gap-quarter-only-top {
  padding: 40px 0 0 0;
}

.section-gap-half-only-top {
  padding: 75px 0 0 0;
}

.section-gap-full-only-top {
  padding: 120px 0 0 0;
}

.section-gap-2x-full-top {
  padding: 200px 0 0 0;
}

.section-gap-150-full-top {
  padding: 150px 0 0 0;
}

.section-gap-pricing-top {
  padding: 120px 0 0 0;
}

.pb-30 {
  padding-bottom: 30px;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.display-table {
  display: table;
}

.light {
  color: #fff;
}

.dark {
  color: #222;
}

.relative {
  position: relative;
}

.overflow-hidden {
  overflow: hidden;
}

.overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.container.fullwidth {
  width: 100%;
}
.container.no-padding {
  padding-left: 0;
  padding-right: 0;
}

.no-padding {
  padding: 0;
}

.padding-top-120 {
  padding-top: 120px;
}

.row.no-margin {
  margin-left: 0;
  margin-right: 0;
}

/* =================================== */
/*  Common Styles
/* =================================== */
.primary-color {
  color: #4169e1;
  fill: #4169e1;
}

.secondary-color {
  color: #5678df;
}

b, strong {
  font-weight: 600 !important;
}

.scroll-top {
  width: 40px;
  height: 40px;
  line-height: 44px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: none;
  background: #4169e1;
  border-radius: 3px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.section-title {
  margin-bottom: 55px;
}

@media (max-width: 768px) {
  .hide-on-mobile {
    display: none;
  }
}
@media screen and (max-width: 767.98px) {
  .mobile-small {
    zoom: 0.65 !important;
  }
}
.gradient-bg, .features-wrap .single-feature .overlay-bg, .banner-section .overlay-bg, .page-top-banner .overlay-bg {
  background: -moz-linear-gradient(0deg, #5678df 0%, #4169e1 100%);
  background: -webkit-linear-gradient(0deg, #5678df 0%, #4169e1 100%);
  background: -ms-linear-gradient(0deg, #5678df 0%, #4169e1 100%);
}

.gradient-bg-green {
  background: -moz-linear-gradient(0deg, #5678df 0%, #4169e1 100%);
  background: -webkit-linear-gradient(0deg, #5678df 0%, #4169e1 100%);
  background: -ms-linear-gradient(0deg, #5678df 0%, #4169e1 100%);
}

.offwhite-bg {
  background-color: #eee;
}

.primary-btn {
  line-height: 22px;
  font-size: 18px;
  text-align: center;
  border-radius: 5px;
  background: #4169e1;
  padding: 15px 40px;
  font-weight: 400;
  min-width: 160px;
  display: inline-block;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.primary-btn:hover {
  color: #fff;
  box-shadow: 0px 30px 90px rgba(65, 105, 225, 0.14) !important;
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
}

.page-top-banner {
  background: url(../img/about-header.jpg);
  background-size: cover;
}
.page-top-banner .overlay-bg {
  opacity: 0.8;
}
.page-top-banner h1 {
  color: #222222;
  font-size: 30px;
}
.page-top-banner h4 {
  color: #000;
  font-weight: 400;
}

.blog-top-banner {
  background: url(../img/live-chat-blog/live-chat-blog-bg.jpg);
  background-size: cover;
}
.blog-top-banner h1 {
  color: #000;
  font-size: 36px;
  margin-bottom: 10px;
}
.blog-top-banner h4 {
  color: #000;
  font-weight: 400;
}

.margin-t-10 {
  margin-top: 10px;
}

.margin-t-20 {
  margin-top: 15px;
}

.margin-t-25 {
  margin-top: 25px;
}

.margin-t-30 {
  margin-top: 30px;
}

.margin-t-40 {
  margin-top: 40px;
}

.margin-t-60 {
  margin-top: 60px;
}

.margin-t-80 {
  margin-top: 80px;
}

.margin-t-100 {
  margin-top: 100px;
}

.margin-t-160 {
  margin-top: 160px;
}

.padding-b-40 {
  padding-bottom: 40px;
}

.padding-t-80 {
  padding-top: 80px;
}

.padding-b-80 {
  padding-bottom: 80px;
}

.margin-t-b-120 {
  margin: 160px 0px;
}

.margin-t-b-110 {
  margin:110px 0px;
}

#see-integration {
  margin-top: 0px;
}

#start-chat {
  margin-top: 0px;
}

#start-chat:hover {
  cursor: pointer;
}

.chat-widget-img {
  height: 95%;
}

.integration-title {
  margin-bottom: 80px;
}

/* =================================== */
/*  Preloader Styles 
/* =================================== */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #4169e1;
  -webkit-animation: spin 2s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 2s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
  z-index: 1001;
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #4169e1;
  -webkit-animation: spin 3s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 3s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #fff;
  -webkit-animation: spin 1.5s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}
#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #222;
  z-index: 1000;
  -webkit-transform: translateX(0);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(0);
  /* IE 9 */
  transform: translateX(0);
  /* Firefox 16+, IE 10+, Opera */
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(-100%);
  /* IE 9 */
  transform: translateX(-100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(100%);
  /* IE 9 */
  transform: translateX(100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateY(-100%);
  /* IE 9 */
  transform: translateY(-100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

/* =================================== */
/*  Banner Styles
/* =================================== */
@media (max-width: 767px) {
  .banner-right video {
    display: none;
  }
}
/* Submenu container */
/* Updated hover rule to include when hovering over the submenu */
.submenu-parent:hover .submenu,
.submenu-parent .submenu:hover {
  display: block;
}

.submenu-parent {
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  top: 70%; /* Positions the submenu directly below the parent */
  /* left: 0; */ /* You've commented this out, which is fine if it fixes the horizontal position */
  background-color: #ffffff;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 9999;
  width: 280px; /* Set a width if needed */
}

/* Submenu items */
.submenu li {
  list-style: none; /* Ensure list styling is removed */
  margin: 0;
  padding: 0;
  display: contents !important;
  /* Remove any positioning or floating properties */
}

/* Submenu links */
.submenu li a {
  display: block; /* Ensure links are block elements */
  padding: 10px 15px;
  color: #333333;
  text-decoration: none;
  background-color: #ffffff;
  /* Remove any positioning or floating properties */
}

/* Hover effect for submenu links */
.submenu li a:hover {
  background-color: #f0f0f0;
}

.header-area {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
}

.dope-nav-container {
  background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0.5215686275) 170%);
  padding: 10px 0px;
  backface-visibility: hidden;
  -webkit-transition: 0.25s cubic-bezier(0.43, 0.49, 0.51, 0.68);
  transition: 0.25s cubic-bezier(0.43, 0.49, 0.51, 0.68);
}

.dope-nav-container.dope-sticky {
  background-color: rgb(25, 42, 86);
  padding: 0px;
}

.dope-navbar {
  padding: 0.5em 5em;
}

.nav-brand {
  max-width: 120px;
}

.dope-btn {
  background-color: #4a7aec;
}

.dopenav ul li.megamenu-item > a::after,
.dopenav ul li.has-down > a::after {
  color: #fff;
}

.header-area {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
}

.dark.dope-nav-container {
  background-color: rgba(25, 42, 86, 0.3);
  -webkit-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  transition-duration: 500ms;
}

.dope-nav-container.dope-sticky {
  background-color: rgba(255, 255, 255, 0.95);
  transition: all 0.5s;
  -webkit-box-shadow: 0px 9px 40px -13px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 9px 40px -13px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 9px 40px -13px rgba(0, 0, 0, 0.75);
}

.dope-navbar {
  padding: 0.5em 5em;
}

.nav-brand {
  max-width: 120px;
}

.dope-btn {
  background-color: #4a7aec;
}

.dopenav ul li.megamenu-item > a::after,
.dopenav ul li.has-down > a::after {
  color: #fff;
}

.bg-img {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-transparent {
  background-color: transparent !important;
}

.dope-nav-container {
  position: relative;
  z-index: 100;
  /* sticky */
}

.dope-nav-container * {
  box-sizing: border-box;
}

.dope-nav-container a {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  text-decoration: none;
  outline: none;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  display: inline-block;
}

.dope-nav-container a#pink-button {
  border-radius: 5px;
  color: black;
  margin: 0px 0px 0px 10px;
}

.dope-nav-container a#pink-button:hover {
  background-color: #dfdfdf !important;
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
}

.dope-nav-container a#black-button {
  background-color: #5678df;
  border-radius: 5px;
  color: white;
  margin: 0px 0px 0px 10px;
}

.dope-nav-container a#black-button:hover {
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
}

.dope-nav-container.dope-sticky {
  position: fixed;
  z-index: 1010;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
}

.dope-nav-container.box-skins .dopenav > ul > li {
  background-color: #1abc9c;
}

.dope-nav-container.box-skins .dopenav > ul > li > a {
  color: #fff;
}

.justify-content-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.justify-content-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.dope-navbar {
  width: 100%;
  height: 70px;
  padding: 0.5em 2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

.dope-navbar .nav-brand {
  font-size: 26px;
  font-weight: 500;
  color: #565656;
  display: inline-block;
  margin-right: 30px;
}

.dope-navbar .nav-brand:focus,
.dope-navbar .nav-brand:hover {
  font-size: 26px;
  font-weight: 500;
}

.dopenav ul li {
  display: inline-block;
  clear: both;
  position: inherit;
  z-index: 10;
}

.dopenav ul li.cn-dropdown-item {
  position: relative;
  z-index: 10;
}

.dopenav ul li.cn-dropdown-item ul li {
  position: relative;
  z-index: 10;
}

.dopenav ul li ul li {
  display: block;
}

.dopenav ul li ul li a {
  padding: 0 20px;
}

.dopenav ul li a {
  padding: 0 12px;
  display: block;
  height: 35px;
  font-size: 16px;
  line-height: 34px;
}

.dopenav ul li a:hover {
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
}

.dopenav ul li .megamenu li a {
  padding: 0 12px;
}

.dopenav ul li div.single-mega a {
  height: auto;
  line-height: 1;
}

/* Down Arrow Icon for Megamenu */
.icon-dope-nav-down-arrow {
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-dope-nav-down-arrow:before {
  content: "\f107";
}

.dopenav ul li.megamenu-item > a:after,
.dopenav ul li.has-down > a:after {
  font-family: "FontAwesome";
  content: "\f107";
  font-size: 12px;
  color: #000000;
  padding-left: 5px;
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
}

.breakpoint-on .dopenav ul li.megamenu-item > a:after,
.breakpoint-on .dopenav ul li.has-down > a:after {
  color: #fff;
}

.dopenav ul li ul li.has-down > a::after {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: absolute;
  top: 0;
  right: 10px;
  z-index: 3;
}

/* button css */
.dope-btn {
  position: relative;
  z-index: 1;
  min-width: 120px;
  padding: 0 25px;
  line-height: 42px;
  height: 42px;
  background-color: #1abc9c;
  border-radius: 50px;
  color: #fff !important;
  margin-left: 30px;
  text-align: center;
}

.dope-btn:hover,
.dope-btn:focus {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Dropdown Toggle */
.dd-trigger {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: transparent;
  cursor: pointer;
  z-index: 500;
  border-radius: 0;
  display: none;
}

/* Close Icon */
.dopecloseIcon {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 12;
  display: none;
}

.dopecloseIcon .cross-wrap {
  width: 26px;
  height: 26px;
  cursor: pointer;
  position: relative;
}

.dopecloseIcon .cross-wrap span {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 6px;
  background: #fff;
}

.dopecloseIcon .cross-wrap span.top {
  top: 12px;
  left: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.dopecloseIcon .cross-wrap span.bottom {
  bottom: 12px;
  left: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* navbarToggler */
.dope-navbar-toggler {
  border: none;
  background-color: transparent;
  cursor: pointer;
  display: none;
}

.dope-navbar-toggler .navbarToggler {
  display: inline-block;
  cursor: pointer;
}

.dope-navbar-toggler .navbarToggler span {
  position: relative;
  background-color: #222;
  border-radius: 3px;
  display: block;
  height: 2px;
  margin-top: 5px;
  padding: 0;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  width: 30px;
  cursor: pointer;
}

.dope-navbar-toggler .navbarToggler span:nth-of-type(1) {
  width: 20px !important;
}

.dope-navbar-toggler .navbarToggler span:nth-of-type(3) {
  width: 15px !important;
}

.dope-navbar-toggler .navbarToggler.active span:nth-of-type(1) {
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
  top: 8px;
  width: 30px !important;
}

.dope-navbar-toggler .navbarToggler.active span:nth-of-type(2) {
  opacity: 0;
}

.dope-navbar-toggler .navbarToggler.active span:nth-of-type(3) {
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);
  top: -6px;
  width: 30px !important;
}

.dopenav ul li .megamenu {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 100%;
  background-color: #ffffff;
  z-index: 200;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.dopenav ul li .megamenu .single-mega.cn-col-5 {
  width: 20%;
  float: left;
  padding: 15px;
  border-right: 1px solid #f2f4f8;
}

.dopenav ul li .megamenu .single-mega.cn-col-5:last-of-type {
  border-right: none;
}

.dopenav ul li .megamenu .single-mega.cn-col-4 {
  width: 25%;
  float: left;
  padding: 15px;
  border-right: 1px solid #f2f4f8;
}

.dopenav ul li .megamenu .single-mega.cn-col-4:last-of-type {
  border-right: none;
}

.dopenav ul li .megamenu .single-mega.cn-col-3 {
  width: 33.3333334%;
  float: left;
  padding: 15px;
  border-right: 1px solid #f2f4f8;
}

.dopenav ul li .megamenu .single-mega.cn-col-3:last-of-type {
  border-right: none;
}

.dopenav ul li .megamenu .single-mega .title {
  font-size: 14px;
  border-bottom: 1px solid #f2f4f8;
  padding: 8px 12px;
}

.dopenav ul li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li:last-child a {
  border-bottom: none;
}

.dopenav ul li .dropdown li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li .dropdown li:last-child a {
  border-bottom: none;
}

.dopenav ul li .dropdown li .dropdown li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li .dropdown li .dropdown li:last-child a {
  border-bottom: none;
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li:last-child a {
  border-bottom: none;
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:last-child a {
  border-bottom: none;
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:last-child a {
  border-bottom: none;
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:last-child a {
  border-bottom: none;
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:last-child a {
  border-bottom: none;
}

/* Desktop Area CSS */
.breakpoint-off .dopenav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

.breakpoint-off .dopenav ul li .dropdown {
  width: 180px;
  position: absolute;
  background-color: #ffffff;
  top: 120%;
  left: 0;
  z-index: 100;
  height: auto;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  opacity: 0;
  visibility: hidden;
  padding: 10px 0;
}

.breakpoint-off .dopenav ul li .dropdown li .dropdown {
  top: 10px;
  left: -180px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
}

.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown {
  opacity: 0;
  visibility: hidden;
  top: 120%;
}

.breakpoint-off .dopenav ul li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  top: 100%;
}

.breakpoint-off .dopenav ul li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  top: -10px;
}

.breakpoint-off .dopenav ul li .megamenu {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width: 100%;
  left: 0;
  top: 120%;
  background-color: #ffffff;
  z-index: 200;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

.breakpoint-off .dopenav ul li.megamenu-item:hover .megamenu,
.breakpoint-off .dopenav ul li.megamenu-item:focus .megamenu {
  top: 100%;
  visibility: visible;
  opacity: 1;
}

/* Mobile/Tablet Nav CSS */
.breakpoint-on .dopecloseIcon {
  display: block;
}

.breakpoint-on .dope-navbar-toggler {
  display: block;
}

.breakpoint-on .dope-navbar .dope-menu {
  background-color: #4169e1;
  position: fixed;
  top: 0;
  left: -310px;
  z-index: 1000;
  width: 300px;
  height: 100%;
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  padding: 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  display: block;
  overflow-x: hidden;
  overflow-y: scroll;
}

.breakpoint-on .dope-navbar .dope-menu.menu-on {
  left: 0;
}

.breakpoint-on .dopenav ul li {
  display: block;
  position: relative;
  clear: both;
  z-index: 10;
  margin: 6px;
}

.breakpoint-on .dopenav ul li a {
  padding: 0 10px;
  height: 38px;
  line-height: 38px;
  color: #fff;
}

.breakpoint-on a#pink-button {
  padding: 0 10px;
  margin-left: 0px;
}

.breakpoint-on a#black-button {
  padding: 0 10px;
  margin-left: 0px;
}

.breakpoint-on .dopenav ul li .dropdown {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  box-shadow: none;
}

.breakpoint-on .dopenav ul li .dropdown li .dropdown {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.breakpoint-on .dopenav ul li.megamenu-item {
  position: relative;
  z-index: 10;
}

.breakpoint-on .dd-trigger {
  height: 38px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
}

.breakpoint-on .dopenav ul li .dropdown,
.breakpoint-on .dopenav ul li .megamenu {
  display: none;
}

.breakpoint-on .dopenav {
  padding-top: 70px;
  padding-left: 20px;
  padding-right: 20px;
}

.breakpoint-on .dopenav ul li .megamenu {
  position: relative;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 200;
  box-shadow: none;
}

.breakpoint-on .dopenav ul li .megamenu .single-mega.cn-col-5,
.breakpoint-on .dopenav ul li .megamenu .single-mega.cn-col-4,
.breakpoint-on .dopenav ul li .megamenu .single-mega.cn-col-3 {
  width: 100%;
  border-right: none;
  border-bottom: 1px solid #f2f4f8;
}

.breakpoint-on .dopenav > ul > li > a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.breakpoint-on .dopenav ul li ul.dropdown li ul li {
  margin-left: 15px;
}

.breakpoint-on .dope-btn {
  width: calc(100% - 30px);
  margin: 30px 15px;
}

.breakpoint-on .dopenav ul li.megamenu-item > a::after,
.breakpoint-on .dopenav ul li.has-down > a::after {
  position: absolute;
  top: 0;
  right: 20px;
  z-index: 5;
}

.breakpoint-on .dopenav ul li.has-down.active > a:after,
.breakpoint-on .dopenav ul li.megamenu-item.active > a:after {
  color: #fff;
}

/* Right Side Menu Open CSS */
.right.breakpoint-on .dope-navbar .dope-menu {
  left: auto;
  right: -310px;
}

.right.breakpoint-on .dope-navbar .dope-menu.menu-on {
  left: auto;
  right: 0;
}

/* Dropdown RTL CSS */
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown {
  left: auto;
  right: 0;
}

.dropdown-rtl .dopenav ul li a,
.dropdown-rtl .dopenav ul li .megamenu .single-mega .title {
  text-align: right;
}

.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown {
  right: 180px;
  left: auto;
  opacity: 0;
  visibility: hidden;
  top: 10px;
}

.dropdown-rtl.breakpoint-off .dopenav ul li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  top: 90%;
}

.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  top: 0;
}

.dropdown-rtl.breakpoint-on .dopenav ul li ul.dropdown li ul li {
  margin-left: 0;
  margin-right: 15px;
}

.event-header .dopenav #nav li a {
  color: #fff;
}
.event-header .dopenav ul li.megamenu-item > a:after,
.event-header .dopenav ul li.has-down > a:after {
  color: #fff;
}
.event-header .dropdown li > a:after {
  color: #222 !important;
}
.event-header .dropdown li a,
.event-header .single-mega li a {
  color: #222 !important;
}
.event-header .dope-sticky .dopenav #nav li a,
.event-header .dope-sticky .dopenav ul li.megamenu-item > a:after,
.event-header .dope-sticky .dopenav ul li.has-down > a:after {
  color: #222;
}
.event-header .dope-navbar-toggler .navbarToggler span {
  background-color: #fff !important;
}
.event-header .dope-sticky .dope-navbar-toggler .navbarToggler span {
  background-color: #222 !important;
}

/* =================================== */
/*  Banner Styles 
/* =================================== */
.banner-section {
  background-color: #4169e1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23df1cbd' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23c61dcd' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23aa20de' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%238624ee' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%235029ff' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%235029ff' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%235029ff' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%235029ff' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%235029ff' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%235029ff' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  min-height: 950px;
}
.banner-section .overlay-bg {
  opacity: 0.6;
}
.banner-section .banner-left h1 {
  font-size: 36px;
  margin-bottom: 30px;
  color: #fff;
}
.banner-section .banner-left p {
  color: #fff;
  font-size: 22px;
  margin-bottom: 30px;
}
.banner-section .banner-left h4 {
  font-weight: 300;
  margin: 20px 0px;
}
.banner-section .banner-left .a-underline {
  color: #fff;
  text-decoration: underline;
  font-size: 16px;
}
.banner-section .banner-left .a-underline:hover {
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
}
.banner-section .banner-right {
  background-size: contain;
}
.banner-section .banner-right img {
  -webkit-animation: jump 5s linear 0s infinite normal forwards;
  animation: jump 5s linear 0s infinite normal forwards;
}
@keyframes jump {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(0);
  }
  41% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(-5px);
  }
  80% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0);
  }
}
@-webkit-keyframes jump {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  41% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  50% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  50% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  80% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.banner-section .wave svg {
  position: absolute;
  width: 100%;
  bottom: -1px;
  fill: #fff;
}
.banner-section .wave svg path:nth-child(1) {
  opacity: 0.15;
}
.banner-section .wave svg path:nth-child(2) {
  opacity: 0.3;
}

.banner-section2 {
  background: url(../img/live-chat-window.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.banner-section2 .overlay-bg {
  background: url(../img/banner-overlay1-v5.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.banner-section2 .banner-left h1 {
  text-transform: uppercase;
  font-size: 22px;
  font-weight: 400;
  font-size: 36px;
  padding-top: 20px;
  font-weight: 600;
}
.banner-section2 .banner-left h1 span {
  display: block;
  padding-top: 20px;
  font-weight: 600;
  font-size: 36px;
}
.banner-section2 .banner-left p {
  margin: 40px 0px;
  max-width: 450px;
  font-size: 18px;
}

.banner-section3 {
  background: url(../img/banner3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.banner-section3 .overlay-bg {
  background: url(../img/banner-overlay.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.banner-section3 .banner-left h1 {
  text-transform: uppercase;
  font-size: 22px;
  font-weight: 400;
}
.banner-section3 .banner-left h1 span {
  display: block;
  padding-top: 20px;
  font-weight: 600;
  font-size: 60px;
}
.banner-section3 .banner-left p {
  margin: 20px 0px;
  max-width: 450px;
}

/* =================================== */
/*  Features Styles 
/* =================================== */
.featured-section .row {
  padding-bottom: 55px;
  border-bottom: 1px solid #eee;
}
.featured-section .single-logo {
  text-align: center;
  padding-bottom: 30px;
}

.feature-section {
  background: url(../img/feature-bg.png) center no-repeat;
  background-size: cover;
  background-position: top;
}
.feature-section .header-left h1 {
  padding-bottom: 30px;
  font-size: 34px;
  text-transform: capitalize;
}
.feature-section .feature-wrap {
  padding-top: 60px;
}
.feature-section p {
  font-size: 18px;
}
.feature-section h2 {
  margin-bottom: 40px;
}

.features-wrap .single-feature {
  background: #fff;
  border-radius: 5px;
  padding: 40px;
  margin-bottom: 30px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.features-wrap .single-feature a.single-feature-link-div {
  color: #333333;
}
.features-wrap .single-feature span {
  font-size: 35px;
  color: #4169e1;
  padding-bottom: 25px;
  display: inline-block;
}
.features-wrap .single-feature h3, .features-wrap .single-feature h4 {
  margin-bottom: 15px;
  font-weight: 600;
}
.features-wrap .single-feature h5 {
  margin-bottom: 10px;
}
.features-wrap .single-feature p {
  margin-bottom: 0px;
  line-height: 1.5em;
  font-size: 18px;
}
.features-wrap .single-feature:hover {
  box-shadow: 0px 30px 90px rgba(65, 105, 225, 0.14) !important;
}
.features-wrap .single-feature:hover span,
.features-wrap .single-feature:hover p,
.features-wrap .single-feature:hover h3,
.features-wrap .single-feature:hover h4,
.features-wrap .single-feature:hover h5 {
  color: #fff;
}
.features-wrap .single-feature .overlay-bg {
  border-radius: 5px;
  opacity: 0;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.features-wrap .single-feature:hover {
  background: transparent;
}
.features-wrap .single-feature:hover .overlay-bg {
  opacity: 1;
}
.features-wrap .single-feature:hover span,
.features-wrap .single-feature:hover h3,
.features-wrap .single-feature:hover h4,
.features-wrap .single-feature:hover h5,
.features-wrap .single-feature:hover p {
  position: relative;
}

.explore-section-bg {
  background: url(../img/use-onwebchat-livechat-system.jpg) right top no-repeat;
  background-size: cover;
}

.explore-section {
  color: #fff;
}
.explore-section h1,
.explore-section h2 {
  color: #fff;
  font-size: 36px;
}
.explore-section h3 {
  color: #fff;
}
.explore-section h3 {
  font-weight: 300;
}
.explore-section h1 {
  font-size: 45px;
  padding-top: 10px;
  padding-bottom: 30px;
}
.explore-section .overlay-bg {
  background: linear-gradient(to right, #000, rgba(235, 143, 169, 0));
}
.explore-section .counter-wrap {
  margin-top: 30px;
}
.explore-section .single-counter {
  width: 33.3333333333%;
  border-right: 1px solid rgba(238, 238, 238, 0.3607843137);
  text-align: center;
}
.explore-section .single-counter:last-child {
  border-right: none;
}
.explore-section .single-counter p {
  margin-bottom: 0px;
}
.explore-section .single-counter h2 {
  font-weight: 300;
  font-size: 50px;
  color: #fff;
}
.explore-section p {
  padding: 30px 0px;
  margin-bottom: 0px;
  font-size: 22px;
}

.service-section a.single-service-link-div {
  color: #333333;
}
.service-section .single-service {
  position: relative;
  background-color: rgba(245, 245, 245, 0.4196078431);
  padding: 40px 30px;
  -webkit-box-shadow: 0 7px 20px -10px rgba(171, 171, 171, 0.7);
  -moz-box-shadow: 0 7px 20px -10px rgba(171, 171, 171, 0.7);
  box-shadow: 0 7px 20px -10px rgba(171, 171, 171, 0.7);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.service-section .single-service i {
  font-size: 35px;
  color: #222;
}
.service-section .single-service h4 {
  margin: 10px 0px;
}
.service-section .single-service p {
  margin-bottom: 0px;
}
.service-section .single-service:hover {
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
  -webkit-box-shadow: 0 10px 50px -12px rgba(171, 171, 171, 0.9);
  -moz-box-shadow: 0 10px 50px -12px rgba(171, 171, 171, 0.9);
  box-shadow: 0 10px 50px -12px rgba(171, 171, 171, 0.9);
}
.service-section .single-service .integration-logo-div {
  height: 40px;
  margin-bottom: 30px;
}
.service-section .owl-dots {
  text-align: center;
  margin-top: 30px;
}
.service-section .owl-dots .owl-dot {
  width: 14px;
  height: 14px;
  background: #eee;
  display: inline-block;
  margin: 0px 5px;
}
.service-section .owl-dots .owl-dot.active {
  background: #4169e1;
}
.service-section .owl-dots .owl-dot:focus {
  outline: none;
}
.service-section p {
  margin: 40px 0px;
  font-size: 18px;
}

.skill-section {
  background: #eee;
}
.skill-section .skill-left p {
  margin-top: 10px;
}
.skill-section .skill-left .prog_container {
  margin-bottom: 25px;
  width: 90%;
}
.skill-section .skill-left .progress {
  background-color: #f9f9f9 !important;
}
.skill-section .skill-left .prog_container .prog_text {
  font-size: 13px;
  text-transform: capitalize;
  color: #000;
  margin-bottom: 5px;
  position: relative;
  width: 100%;
  font-weight: 700;
}
.skill-section .skill-left .prog_container .prog_text .precent {
  position: absolute;
  right: 0;
}
.skill-section .skill-left .prog_container .progress {
  height: 3px;
  border-radius: 4px;
}
.skill-section .skill-left .prog_container .progress .progress-bar {
  background-color: #4169e1;
  height: 100%;
}
.skill-section .skill-left .prog_container .progress.md {
  height: 10px;
}
.skill-section .skill-left .prog_container .progress.lg {
  height: 20px;
}
@media all and (max-width: 767px) {
  .skill-section .skill-left .prog_container .prog_text .precent {
    position: -webkit-sticky;
    position: sticky;
    right: 0;
  }
}
.skill-section .skill-right img {
  border-radius: 3px;
  background: #fff;
  padding: 10px;
  -webkit-box-shadow: 0 7px 20px -10px #000;
  -moz-box-shadow: 0 7px 20px -10px #000;
  box-shadow: 0 7px 20px -10px #000;
}

.white-section p {
  font-size: 18px;
}

.just-section p {
  font-size: 18px;
}

.live-chat-features-triggers-bg-no-webp {
  background-image: url("../img/onwebchat-triggers.jpg?v=2");
  height: 648px;
}

.live-chat-admin-page-scn-no-webp {
  background-image: url("../img/support/dashboard-chat-visitor-details.jpg");
  height: 596px;
  background-position: right 0px center;
}

.live-chat-admin-visitors-page-scn-no-webp {
  background-image: url("../img/live-chat-features/live-chat-admin-visitors-page-800-v3.jpg");
  height: 642px;
  margin-left: 20px;
}

.live-chat-widget-window-no-webp {
  display: block;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  margin-left: 20%;
}

.pre-form-img {
  display: block;
  margin-left: 20%;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  border-radius: 6px; /* optional, for rounded edges */
}

.mobile-border {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.live-chat-admin-departments-page-scn-no-webp {
  background-image: url("../img/live-chat-features/live-chat-feature-departments-3.jpg");
  height: 557px;
  margin-left: 20px;
}

.live-chat-widget-window-rating-no-webp {
  background-image: url("../img/chat-window/live-chat-window-chat-rating-3.jpg");
  background-position: center;
  background-repeat: no-repeat;
  height: 578px;
}

/* =================================== */
/*  About Styles 
/* =================================== */
.about-section .overlay-bg1 {
  background: url(../img/bg2.png);
  background-size: cover;
  background-position: center;
}
.about-section .overlay-bg2 {
  background: url(../img/bg.png);
  background-size: cover;
  background-position: center;
}
.about-section .about-left img {
  width: 100%;
}
.about-section .about-right h1 {
  margin-top: 20px;
  margin-bottom: 30px;
  max-width: 480px;
}
.about-section .about-right .icon {
  margin-right: 30px;
}
.about-section .about-right .icon span {
  font-size: 40px;
  color: #4169e1;
}
.about-section .about-right .details p {
  max-width: 360px;
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 18px;
}
.about-section .about-right .details h4 {
  font-weight: 600;
}
.about-section .about-right ul li {
  margin-bottom: 20px !important;
}
.about-section .about-right ul li:last-child {
  margin-bottom: 0px !important;
}

.floating-shapes span {
  display: block;
  position: absolute;
}
.floating-shapes span img {
  display: block;
  max-width: 100%;
  height: auto;
}
.floating-shapes span:nth-child(1) {
  left: 4.8%;
  top: 4.5%;
}
.floating-shapes span:nth-child(2) {
  left: 9.6%;
  top: 27.2%;
}
.floating-shapes span:nth-child(3) {
  left: 8.8%;
  bottom: 16%;
}
.floating-shapes span:nth-child(4) {
  left: 25%;
  bottom: 21%;
}
.floating-shapes span:nth-child(5) {
  left: 35%;
  top: 6.6%;
}
.floating-shapes span:nth-child(6) {
  left: 43%;
  bottom: 30%;
}
.floating-shapes span:nth-child(7) {
  left: 49%;
  top: 50%;
}
.floating-shapes span:nth-child(8) {
  right: 11.8%;
  top: 33%;
}
.floating-shapes span:nth-child(9) {
  right: 6%;
  top: 10%;
}
.floating-shapes span:nth-child(10) {
  right: 4.5%;
  bottom: 33%;
}

@media screen and (max-width: 767px) {
  .floating-shapes span {
    transform: none !important;
    display: none;
  }
}
/* =================================== */
/*  Testimonial Styles 
/* =================================== */
.testimonial-section {
  padding-top: 120px;
}
.testimonial-section .testimonial-left p {
  margin-top: 20px;
  margin-bottom: 40px;
  max-width: 300px;
  font-size: 18px;
}
.testimonial-section .testimonial-right h2 {
  margin-bottom: 30px;
}
.testimonial-section .single-testimonial {
  border: 1px solid #eee;
  background: rgba(238, 238, 238, 0.1215686275);
  border-radius: 5px;
  padding: 30px;
}
.testimonial-section .single-testimonial p {
  color: #222;
  font-weight: 400;
  font-size: 17px;
}
.testimonial-section .single-testimonial .img-wrap {
  margin-right: 20px;
}
.testimonial-section .single-testimonial .img-wrap img {
  border-radius: 30px;
}
.testimonial-section .single-testimonial .details p {
  margin-bottom: 0px;
  color: #333333;
}
.testimonial-section .testimonial-white-bg {
  background: #fff !important;
  border-color: #fff !important;
}
.testimonial-section .carusel-two .owl-dots .owl-dot {
  background: #fff;
}
.testimonial-section .owl-dots {
  text-align: left;
  margin-top: 30px;
}
.testimonial-section .owl-dots .owl-dot {
  border-radius: 20px;
  width: 14px;
  height: 14px;
  background: #eeeeee;
  display: inline-block;
  margin: 0px 5px;
}
.testimonial-section .owl-dots .owl-dot.active {
  background: #4169e1;
}
.testimonial-section .owl-dots .owl-dot:focus {
  outline: none;
}

.screenshot-section {
  background: #eee;
}
.screenshot-section .owl-nav {
  text-align: center;
  margin-top: 40px;
}
.screenshot-section .owl-nav .owl-next, .screenshot-section .owl-nav .owl-prev {
  font-size: 30px !important;
}
.screenshot-section .owl-nav .owl-next:focus, .screenshot-section .owl-nav .owl-prev:focus {
  outline: none;
}
.screenshot-section p {
  font-size: 18px;
}

.bg-color-blue {
  background-color: #2a7af3;
}

.screenshot_slider .owl-stage .owl-item .item img {
  -webkit-transition: 0.3s;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  transition: 0.3s;
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
}

.screenshot_slider .owl-carousel .owl-item img {
  width: auto;
  max-width: 100%;
}

.screenshot_slider .owl-stage .owl-item.center .item img {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.screenshot_slider .owl-item {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.screenshot_slider .owl-controls .owl-prev, .testimonial-caroussel .owl-controls .owl-prev,
.screenshot_slider .owl-controls .owl-next, .testimonial-caroussel .owl-controls .owl-next {
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0);
  color: #fff;
  height: 40px;
  left: 0;
  line-height: 3;
  margin: 0 5px;
  position: absolute;
  text-align: center;
  bottom: -16%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 40px;
  z-index: 9;
}

.screenshot_slider .owl-controls .owl-prev:hover, .testimonial-caroussel .owl-prev:hover,
.screenshot_slider .owl-controls .owl-next:hover, .testimonial-caroussel .owl-next:hover {
  border-color: #fff;
  color: #ffffff;
}

.screenshot_slider .owl-controls .owl-prev span, .testimonial-caroussel .owl-controls .owl-prev span,
.screenshot_slider .owl-controls .owl-next span, .testimonial-caroussel .owl-controls .owl-next span {
  font-size: 28px;
}

.screenshot_slider .owl-controls .owl-next {
  left: auto;
  right: 45%;
  font-size: 30px;
}

.screenshot_slider .owl-controls .owl-prev {
  right: auto;
  left: 45%;
  font-size: 30px;
}

/* =================================== */
/*  Portfolio Styles 
/* =================================== */
.portfolio-section .single-portfolio {
  margin-bottom: 30px;
  text-align: center;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
}
.portfolio-section .single-portfolio img {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 100%;
}
.portfolio-section .single-portfolio .box-content {
  width: 100%;
  padding: 40px 0;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  bottom: 0px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.3s ease 0s;
}
.portfolio-section .single-portfolio:hover .box-content {
  opacity: 1;
  transform: translateY(0);
}
.portfolio-section .single-portfolio:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.portfolio-section .single-portfolio .box-content .title {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 5px 0;
}
.portfolio-section .single-portfolio .box-content .post {
  display: inline-block;
  font-size: 15px;
  color: #fff;
  text-transform: capitalize;
}
.portfolio-section .primary-btn {
  margin-top: 20px;
}

.product-detials-section img {
  width: 100%;
}
.product-detials-section .details-right {
  padding-bottom: 20px;
}
.product-detials-section .details-right ul {
  margin-bottom: 20px;
}
.product-detials-section .details-right ul li {
  margin-bottom: 8px;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.product-detials-section .details-right ul li span {
  font-weight: 900;
}
.product-detials-section .details-right p {
  color: #000;
  font-weight: 400;
}
.product-detials-section .details-right p:last-child {
  margin-bottom: 0px;
}

/* =================================== */
/*  Blog Styles
/* =================================== */
.blog-section .blog-wrap {
  border-top: 1px solid #eee;
}
.blog-section .overlay-bg {
  background: rgba(34, 34, 34, 0.2);
  z-index: 1;
}
.blog-section .single-blog {
  overflow: hidden;
  border-radius: 5px;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.blog-section .single-blog:hover {
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
  -webkit-box-shadow: 0 10px 50px -12px rgba(171, 171, 171, 0.9);
  -moz-box-shadow: 0 10px 50px -12px rgba(171, 171, 171, 0.9);
  box-shadow: 0 10px 50px -12px rgba(171, 171, 171, 0.9);
}
.blog-section .single-blog img {
  position: relative;
  width: 100%;
}
.blog-section .single-blog .blog-post-details {
  position: absolute;
  width: 100%;
  bottom: 0px;
  z-index: 1;
  padding: 20px;
}
.blog-section .single-blog .blog-post-details h4 {
  font-weight: 400;
}
.blog-section .single-blog .blog-post-details ul {
  display: block;
  padding-bottom: 15px;
}
.blog-section .single-blog .blog-post-details ul li {
  display: inline-block;
  margin-right: 3px;
}
.blog-section .single-blog .blog-post-details a {
  font-weight: 400;
}
.blog-section .single-blog h4,
.blog-section .single-blog a {
  color: #fff;
}
.blog-section .primary-btn {
  margin-top: 40px;
}

.blog-lists-section {
  background: #eee;
}
.blog-hero-section .blog-hero-title {
  font-size: 36px;
  font-weight: 600;
  color: #222;
  margin-bottom: 12px;
}
.blog-hero-section .blog-hero-subtitle {
  font-size: 18px;
  color: #555;
  line-height: 1.6;
  margin: 0;
  max-width: 640px;
}
.blog-show-more-btn {
  padding: 12px 32px;
  font-weight: 600;
  background: #4169e1 !important;
  border-color: #4169e1 !important;
}
.blog-show-more-btn:hover {
  background: #3159d1 !important;
  border-color: #3159d1 !important;
}
.blog-lists-section .single-blog-post {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 30px 90px rgba(0, 0, 0, 0.14) !important;
  overflow: hidden;
  margin-bottom: 30px;
}
.blog-lists-section .single-blog-post:hover .post-thumb img {
  transform: scale(1.1);
}
.blog-lists-section .single-blog-post .post-thumb {
  overflow: hidden;
}
.blog-lists-section .single-blog-post .post-thumb .overlay-bg {
  background: rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.blog-lists-section .single-blog-post .post-thumb img {
  width: 100%;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.blog-lists-section .single-blog-post .post-details {
  padding: 30px;
}
.blog-lists-section .single-blog-post .post-details h3 {
  margin-bottom: 14px;
}
.blog-lists-section .single-blog-post .tags li {
  display: inline-block;
  margin-right: 10px;
  color: #4169e1;
  font-weight: 600;
  font-size: 14px;
}
.blog-lists-section .single-blog-post .tags li a {
  color: #4169e1;
  font-weight: 600;
  font-size: 14px;
}
.blog-lists-section .single-blog-post h1 {
  margin: 10px 0px;
}
.blog-lists-section .single-blog-post .user-details img {
  width: 45px;
  border-radius: 50px;
}
.blog-lists-section .single-blog-post .user-details p {
  margin-bottom: 0px;
}
.blog-lists-section .single-blog-post .user-details .details {
  margin-left: 8px;
}
.blog-lists-section .single-blog-post .user-details .details p {
  font-size: 14px;
}
.blog-lists-section .pagination .page-item {
  margin: 5px;
}
.blog-lists-section .pagination .page-link,
.blog-lists-section .pagination i {
  color: #222;
  font-weight: 500;
}
.blog-lists-section .pagination .page-link {
  width: 35px;
  text-align: center;
  border-radius: 3px;
}
.blog-lists-section .pagination .page-link:hover {
  background: #4169e1;
  color: #fff;
}
.blog-lists-section .pagination .page-link:hover i {
  color: #fff;
}
.blog-lists-section .pagination .active .page-link {
  background: #4169e1;
  color: #fff;
  border-color: transparent;
}
.blog-lists-section .single-widget {
  background: #fff;
  border-radius: 5px;
  padding: 30px;
  box-shadow: 0px 30px 90px rgba(0, 0, 0, 0.14) !important;
  overflow: hidden;
  margin-bottom: 30px;
}
.blog-lists-section .single-widget .widget-title {
  margin-bottom: 20px;
}
.blog-lists-section .search-widget .sidebar-form form input {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #eee;
  padding: 0 10px;
  text-indent: 10px;
  transition: all 0.2s ease 0s;
  width: 100%;
  height: 50px;
}
.blog-lists-section .search-widget .sidebar-form form input:focus {
  outline: none;
}
.blog-lists-section .search-widget .sidebar-form form button {
  background: #222 none repeat scroll 0 0;
  border: 0 none;
  color: #fff;
  font-size: 20px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 50px;
}
.blog-lists-section .search-widget .sidebar-form form button:hover {
  cursor: pointer;
}
.blog-lists-section .search-widget .sidebar-form form button:focus {
  outline: none;
}
.blog-lists-section .recent-post-widget ul li {
  margin-bottom: 20px;
}
.blog-lists-section .recent-post-widget ul li .thumbs {
  width: 40%;
}
.blog-lists-section .recent-post-widget ul li .details {
  margin-left: 10px;
}
.blog-lists-section .recent-post-widget ul li .details p,
.blog-lists-section .recent-post-widget ul li .details h5 {
  font-size: 12px;
}
.blog-lists-section .recent-post-widget ul li .details p {
  margin-bottom: 0px;
  font-weight: 400;
}
.blog-lists-section .social-widget li {
  display: inline-block;
  margin-right: 10px;
}
.blog-lists-section .social-widget li a {
  text-align: center;
  color: #fff;
  background: #222;
  padding: 10px;
  width: 42px;
  display: block;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.blog-lists-section .social-widget li a:hover {
  background: #4169e1;
}
.blog-lists-section .archive-widget ul li {
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.blog-lists-section .archive-widget ul li:last-child {
  border-bottom: none;
}
.blog-lists-section .archive-widget ul li a {
  font-weight: 500;
  color: #222;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.blog-lists-section .archive-widget ul li a:hover {
  color: #4169e1;
}
.blog-lists-section .banner-widget {
  padding: 0px;
}
.blog-lists-section .tags-widget ul li {
  display: inline-block;
}
.blog-lists-section .tags-widget ul li a {
  font-size: 10px;
  margin-bottom: 5px;
  font-weight: 500;
  background: #000000;
  color: #fff;
  display: inline-block;
  padding: 8px 18px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.blog-lists-section .tags-widget ul li a:hover {
  background: #4169e1;
}

.blog-details {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 30px 90px rgba(0, 0, 0, 0.14) !important;
  overflow: hidden;
  margin-bottom: 30px;
}
.blog-details:hover .post-thumb img {
  transform: scale(1.1);
}
.blog-details h1 {
  margin: 10px 0px;
}
.blog-details .post-thumb {
  overflow: hidden;
}
.blog-details .post-thumb .overlay-bg {
  background: rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.blog-details .post-thumb img {
  width: 100%;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.blog-details .tags li {
  display: inline-block;
  margin-right: 10px;
}
.blog-details .tags li a {
  color: #4169e1;
  font-weight: 600;
  font-size: 14px;
}
.blog-details .post-details {
  padding: 30px;
}
.blog-details .post-details ol, .blog-details .post-details ul {
  margin: initial;
  padding: 10px 0 20px 40px;
}
.blog-details .post-details li {
  display: list-item;
  margin-bottom: 0.5em;
  font-weight: bold;
}
.blog-details .post-details ol {
  list-style: decimal;
}
.blog-details .post-details ul {
  list-style: square;
}
.blog-details .user-details img {
  width: 45px;
  border-radius: 50px;
}
.blog-details .user-details p {
  margin-bottom: 0px;
}
.blog-details .user-details .details {
  margin-left: 8px;
}
.blog-details .blockquote {
  border-left: 5px solid #4169e1;
  font-size: 14px;
  margin-bottom: 35px;
  margin-left: 20px;
  margin-top: 35px;
  padding-left: 15px;
}
.blog-details .a-underline-blue {
  display: inline-block;
  margin-top: 20px;
  color: #0056b3;
  font-size: 16px;
}
.blog-details .a-underline-blue:hover {
  color: #0056b3;
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
}

.comment-wrap {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 30px 90px rgba(0, 0, 0, 0.14) !important;
  overflow: hidden;
  padding: 30px;
}
.comment-wrap h3 {
  margin-bottom: 30px;
}
.comment-wrap .media {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}
.comment-wrap .media:last-child {
  border-bottom: none;
  padding-bottom: 0px;
}
.comment-wrap .media img {
  width: 90px;
  border-radius: 50px;
}
.comment-wrap .replay-comment {
  border-bottom: none;
  border-top: 1px solid #eee;
  padding: 20px;
  margin-bottom: 0px !important;
}
.comment-wrap .comments {
  margin-bottom: 30px;
}
.comment-wrap .comments:last-child {
  margin-bottom: 0px;
}
.comment-wrap .black-btn {
  min-width: 80px !important;
}
.comment-wrap .media-body h5 {
  margin-bottom: 10px;
}
.comment-wrap .comment-form h3 {
  margin-bottom: 30px;
}

.comment-form {
  margin-top: 30px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 30px 90px rgba(0, 0, 0, 0.14) !important;
  overflow: hidden;
  padding: 30px;
}
.comment-form .form-control:focus {
  box-shadow: none;
  border-color: #ced4da;
}
.comment-form .primary-btn {
  margin-top: 30px;
}
.comment-form h3 {
  margin-bottom: 30px;
}
.comment-form .form-col-wrap {
  margin-bottom: 30px;
}

/* =================================== */
/*  Team Styles 
/* =================================== */
.team-section {
  background-color: #eee;
}
.team-section .single-team {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.team-section .single-team img {
  width: 100%;
  position: relative;
}
.team-section .single-team:hover .team-content {
  opacity: 1;
}
.team-section .team-content {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: rgba(34, 34, 34, 0.8);
  padding: 20px 0px;
  color: #fff;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.team-section .team-content a,
.team-section .team-content h4 {
  color: #fff;
}
.team-section .team-content ul li {
  display: inline-block;
  margin: 5px;
}
.team-section .owl-dots {
  text-align: center;
  margin-top: 30px;
}
.team-section .owl-dots .owl-dot {
  width: 14px;
  height: 14px;
  background: #fff;
  display: inline-block;
  margin: 0px 5px;
}
.team-section .owl-dots .owl-dot.active {
  background: #4169e1;
}
.team-section .owl-dots .owl-dot:focus {
  outline: none;
}

/* =================================== */
/*  Accordian Styles 
/* =================================== */
.home-faq-section {
  padding-top: 120px;
}
.home-faq-section p {
  margin-top: 20px;
  font-size: 18px;
}

.accordion > dt {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  -webkit-box-shadow: 0 7px 20px -10px #000;
  -moz-box-shadow: 0 7px 20px -10px #000;
  box-shadow: 0 7px 20px -10px #000;
}

.accordion > dt > a {
  display: block;
  position: relative;
  color: #222222;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 3px;
  border: 1px solid #e8e8e8;
}

.accordion > dt > a:hover {
  text-decoration: none;
  border-color: #ddd;
  background: #fbfbfb;
}

.accordion > dt > a.active {
  color: #fff;
  border-color: #4169e1;
  background: #4169e1;
  cursor: default;
}
.accordion > dt > a.active:after {
  color: #fff !important;
}

.accordion > dt > a:after {
  content: "\f107";
  width: 15px;
  height: 15px;
  margin-top: -8px;
  position: absolute;
  top: 50%;
  right: 10px;
  font-family: "FontAwesome";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: 15px;
  line-height: 15px;
  text-align: center;
  color: #999;
  -webkit-font-smoothing: antialiased;
}

.accordion > dt > a.active:after,
.accordion > dt > a.active:hover:after {
  content: "\f106";
  color: #111;
}

.accordion > dt > a:hover:after {
  color: #444;
}

.accordion > dd {
  margin-bottom: 10px;
  padding: 10px 20px 20px;
  font-size: 16px;
  line-height: 1.8;
}

.accordion > dt > a,
.accordion > dt > a:after,
.toggle > dt > a,
.toggle > dt > a:after {
  -webkit-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
  -moz-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
  -o-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
  -ms-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
  transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
}

.accordion > dt > a.active {
  pointer-events: none !important;
  cursor: default !important;
}

/* =================================== */
/*  Accordian Styles 
/* =================================== */
.accordionFAQ dt {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  -webkit-box-shadow: 0 7px 20px -10px #000;
  -moz-box-shadow: 0 7px 20px -10px #000;
  box-shadow: 0 7px 20px -10px #000;
}

.accordionFAQ dt > a {
  display: block;
  position: relative;
  color: #222222;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 3px;
  border: 1px solid #e8e8e8;
}

.accordionFAQ dt > a:hover {
  text-decoration: none;
  border-color: #ddd;
  background: #fbfbfb;
}

.accordionFAQ dt > a.active {
  color: #fff;
  border-color: #4169e1;
  background: #4169e1;
}
.accordionFAQ dt > a.active:after {
  color: #fff !important;
}

.accordionFAQ dt > a:after {
  content: "\f107";
  width: 15px;
  height: 15px;
  margin-top: -8px;
  position: absolute;
  top: 50%;
  right: 10px;
  font-family: "FontAwesome";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: 15px;
  line-height: 15px;
  text-align: center;
  color: #999;
  -webkit-font-smoothing: antialiased;
}

.accordionFAQ dt > a.active:after,
.accordionFAQ dt > a.active:hover:after {
  content: "\f106";
  color: #111;
}

.accordionFAQ dt > a:hover:after {
  color: #444;
}

.accordionFAQ dd {
  display: none;
  margin-bottom: 10px;
  padding: 10px 20px 20px;
  font-size: 16px;
  line-height: 1.8;
}

.accordionFAQ dt > a,
.accordionFAQ dt > a:after,
.toggle dt > a,
.toggle dt > a:after {
  -webkit-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
  -moz-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
  -o-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
  -ms-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
  transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
}

/* =================================== */
/*  CTA Styles 
/* =================================== */
.cta-section {
  background: url(../img/banner2.jpg);
  background-attachment: fixed;
  background-size: cover;
}
.cta-section h1, .cta-section h4, .cta-section p {
  color: #fff;
}
.cta-section h4 {
  font-weight: 400;
  padding-top: 20px;
  padding-bottom: 30px;
}
.cta-section .overlay-bg {
  background: rgba(0, 0, 0, 0.8);
}

/* =================================== */
/*  Price Styles
/* =================================== */
.blue-bold {
  color: #1377da;
  font-weight: 600 !important;
  font-size: 19px !important;
}

.btn-outline-dark:active {
  color: #ffffff;
  background-color: #4169e1 !important;
}

.btn-outline-dark.active {
  color: #ffffff;
  background-color: #4169e1 !important;
}

.btn-outline-dark:hover {
  color: #444444;
  background-color: #eaeaea;
}

.page-top-banner-pricing {
  background-size: cover;
}
.page-top-banner-pricing h1 {
  color: #000;
  font-size: 36px;
  margin-bottom: 10px;
  margin-top: 38px;
}
.page-top-banner-pricing h4 {
  color: #000;
  font-weight: 400;
}

.price-section .price-left h4 {
  font-size: 36px;
}
.price-section .price-left p {
  color: #222;
  padding: 30px 0px;
  max-width: 320px;
  font-size: 18px;
  margin-bottom: 0px;
}
.price-section .price-left .a-underline-blue {
  font-size: 16px;
  display: inline-block;
  margin-top: 30px;
  color: #0056b3;
}
.price-section .price-left .a-underline-blue:hover {
  color: #0056b3;
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
}
.price-section .price-right .main {
  margin: -30px 0;
  background: linear-gradient(to right, #4169e1, rgb(25, 67, 184));
  color: #fff;
}
.price-section .price-right .main i, .price-section .price-right .main h4, .price-section .price-right .main h2 {
  color: #fff;
}
.price-section .price-right .main .bottom-wrap {
  border-color: #fff;
}
.price-section .price-right .secondary {
  color: #000;
}
.price-section .price-right .secondary i, .price-section .price-right .secondary h4, .price-section .price-right .secondary h2 {
  color: #000;
}
.price-section .price-right .secondary .bottom-wrap {
  border-color: #000;
}
.price-section .single-price {
  font-weight: 400;
  width: 100%;
  border-radius: 5px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 0 auto;
  -webkit-box-shadow: 5px 4px 37px 10px rgba(27, 0, 20, 0.12);
  box-shadow: 5px 4px 37px 10px rgba(27, 0, 20, 0.12);
  padding: 40px 30px;
  z-index: 1;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.price-section .single-price i {
  position: relative;
  font-size: 40px;
  color: #4169e1;
}
.price-section .single-price h4 {
  position: relative;
  margin: 10px 0;
}
.price-section .single-price .bottom-wrap {
  border-top: 1px solid rgb(140, 141, 158);
  margin-top: 20px;
  padding-top: 20px;
}
.price-section .single-price .bottom-wrap i {
  font-size: 10px;
}
.price-section .single-price .bottom-wrap ul li {
  margin-bottom: 10px;
}
.price-section .single-price .bottom-wrap ul li:last-child {
  margin-bottom: 0px;
}
.price-section .single-price .bottom-wrap .primary-btn-w {
  background: #fff;
  color: #222;
  margin-top: 30px;
}
.price-section .single-price .bottom-wrap .primary-btn {
  margin-top: 30px;
}
.price-section .single-price .price-explanation {
  font-size: 16px;
  font-weight: normal;
}

.pricing-link-div {
  padding: 30px 0px;
  border-radius: 5px;
  background: #fff;
  margin-bottom: 40px;
  transition: all 0.4s ease;
}

.pricing-link-div:hover {
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
  -webkit-box-shadow: 0 10px 50px -12px rgba(171, 171, 171, 0.9);
  -moz-box-shadow: 0 10px 50px -12px rgba(171, 171, 171, 0.9);
  box-shadow: 0 10px 50px -12px rgba(171, 171, 171, 0.9);
}

.highlight {
  color: #5678df;
}

.question {
  padding: 20px 0px;
}

.premium-live-chat-feature {
  color: #691cff;
}

.question h5 {
  margin-bottom: 6px;
}

.question p {
  line-height: 1.5;
}

/* =================================== */
/*  Download Styles
/* =================================== */
.download-section {
  background: url(../img/download-bg.png);
  background-size: cover;
}
.download-section p {
  margin-top: 20px;
  margin-bottom: 0px;
  font-size: 18px;
}
.download-section .download-wrap {
  padding-top: 80px;
}
.download-section .dload-btn {
  text-align: right;
}
.download-section .primary-btn {
  margin-left: 20px;
  display: inline-flex;
  align-items: center;
}
.download-section .primary-btn svg {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

/* =================================== */
/*  Clients Styles 
/* =================================== */
.clients-wrap {
  padding: 30px 0px;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}

.single-client {
  text-align: center;
}

.contact-wrap {
  padding: 60px 0px;
}
.contact-wrap h3 {
  font-weight: 400;
}
.contact-wrap h3 i {
  margin-right: 10px;
}

/* =================================== */
/*  Stat Styles 
/* =================================== */
.stat-section {
  background: #4169e1;
}
.stat-section h1, .stat-section h4 {
  color: #fff;
}
.stat-section .single-stat {
  color: #fff;
}
.stat-section .single-stat i {
  font-size: 35px;
}
.stat-section .single-stat h1 {
  margin: 20px 0px;
}

/* =================================== */
/*  Contact Styles
/* =================================== */
.contact-section {
  background: url(../img/download-bg.png);
  border-bottom: 100px solid #222;
}
.contact-section .section-title {
  padding-top: 120px;
}

.form-row {
  background: #fff;
  padding: 30px 0px;
  border-radius: 3px;
  margin-bottom: -100px;
  box-shadow: 0px 0px 158px 0px rgba(0, 0, 0, 0.11);
  -webkit-box-shadow: 0px 0px 158px 0px rgba(0, 0, 0, 0.11);
  -moz-box-shadow: 0px 0px 158px 0px rgba(0, 0, 0, 0.11);
}

.address-wrap .single-address-col {
  text-align: center;
  margin-bottom: 40px;
}
.address-wrap .single-address-col i {
  font-size: 50px;
  color: #4169e1;
}
.address-wrap .single-address-col p {
  font-size: 18px;
  margin-top: 10px;
  color: #222;
}

.contact-form-wrap {
  padding: 50px;
}
.contact-form-wrap .form-col {
  margin-bottom: 30px;
}
.contact-form-wrap .form-control {
  border-radius: 0px;
  border-top: none;
  border-left: none;
  border-right: none;
  background: transparent;
  padding-left: 10px;
}
.contact-form-wrap .form-control:focus {
  box-shadow: none !important;
  border-color: #222 !important;
}
.contact-form-wrap .primary-btn {
  vertical-align: center;
  margin-top: 30px;
  border: none;
}
.contact-form-wrap .primary-btn:focus {
  outline: none;
}

.form-row .message.error {
  font-size: 15px !important;
}
.form-row .message.success {
  font-size: 15px !important;
}
.form-row .message {
  height: 50px;
  width: 100%;
  font-size: 13px;
  line-height: 50px;
  text-align: center;
  float: none;
  margin-top: 20px;
  display: none;
  color: #fff;
}
.form-row .error {
  background: #ef5659;
}
.form-row .success {
  background: #4169e1;
}

.contact-page-section {
  background: #eee !important;
}
.contact-page-section .single-address-col .div {
  padding: 30px 0px;
  border-radius: 5px;
  background: #fff;
  margin-bottom: 40px;
}
.contact-page-section .a-underline-blue {
  display: inline-block;
  margin-top: 20px;
  color: #0056b3;
  font-size: 16px;
}
.contact-page-section .a-underline-blue:hover {
  color: #0056b3;
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
}

.home-contact {
  padding-bottom: 50px;
}

#submit-message:hover {
  cursor: pointer;
}

/* =================================== */
/*  Footer Styles
/* =================================== */
.footer-section {
  font-size: 16px;
  line-height: 1.625;
  background: #222;
}
.footer-section .footer-menu {
  text-align: right;
}
.footer-section .footer-menu li {
  display: inline-block;
  padding-left: 12px;
}
.footer-section .footer-menu li a {
  font-weight: 400;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.footer-section .footer-menu li a:hover {
  color: #4169e1;
}
.footer-section .copyright-text {
  margin-top: 30px;
  text-align: left;
  color: #a3a3a3 !important;
}
.footer-section .copyright-text i {
  color: #FF0000;
}
.footer-section .copyright-text a {
  color: #fff;
}
.footer-section #social {
  text-align: right;
  margin-bottom: 20px;
}
.footer-section #social li {
  display: inline-block;
}
.footer-section #social li a {
  color: #fff;
  text-align: center;
  display: block;
  margin-left: 15px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.footer-section #social li a i {
  font-size: 18px;
}
.footer-section #social li a:hover {
  color: #4169e1;
  border-color: #4169e1;
}
.footer-section .footer-cols h4 {
  color: white;
  margin-bottom: 20px;
}
.footer-section .footer-cols h4.color-1 {
  color: rgb(25, 67, 184);
}
.footer-section .footer-cols h4.color-2 {
  color: #4169e1;
}
.footer-section .footer-cols h4.color-3 {
  color: #5678df;
}
.footer-section .footer-cols p {
  color: #fff;
}
.footer-section .footer-cols #social {
  text-align: left;
  margin-top: 20px;
}
.footer-section .footer-cols #social li:first-child a {
  margin-left: 0px;
}
.footer-section .footer-cols ul li {
  margin-bottom: 10px;
  color: #fff;
}
.footer-section .footer-cols ul li a {
  color: #fff;
  font-weight: 400;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.footer-section .footer-cols ul li a:hover {
  color: #4169e1;
}

.cookies-bar {
  zoom: 0.75;
  display: none;
  border-radius: 5px;
  width: 310px;
  height: 175px;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  bottom: 0px;
  left: 30px;
  padding: 15px;
  z-index: 1011110008;
  margin-bottom: 10px;
  font-weight: 400;
}

.cookies-bar-text {
  color: white;
  font-size: 16px;
  line-height: 26px;
}

.accept-cookies-btn {
  margin-left: 15px;
  border: 1px solid white;
  border-radius: 5px;
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 15px;
  cursor: pointer;
}

.accept-cookies-btn:hover {
  background-color: #353535;
}

.learn-more-cookies {
  color: white;
  position: relative;
  top: 5px;
  left: 20px;
  font-size: 14px;
}

.learn-more-cookies:hover {
  color: #ffffff;
  text-decoration: underline;
}

.cookies-controls {
  margin-top: 15px;
}

.cookies-controls-left {
  width: 50%;
  float: left;
}

/* =================================== */
/*  Legal Pages Styles
/* =================================== */
.legal-section h2 {
  margin: 30px 0px 30px 0px;
}
.legal-section h2.first {
  margin-top: 0px;
}
.legal-section ol, .legal-section ul {
  margin: initial;
  padding: 10px 0 20px 40px;
}
.legal-section li {
  display: list-item;
  margin-bottom: 0.5em;
  font-weight: 600;
}
.legal-section ol {
  list-style: decimal;
}

#docs #guide-container {
  height: 100%;
  background-color: red;
  width: 210px;
}
#docs #guide {
  margin-top: 70px;
  background: #b879f5;
  border-right: 1px solid #DADFE5;
  left: 0;
  top: 0;
  position: fixed;
  overflow: hidden;
  overflow-y: auto;
  width: 210px;
  z-index: 25;
  height: 100%;
}
#docs #guide .logo {
  margin-top: 0;
  font-size: 29px;
}
#docs #guide .logo a {
  color: #000;
  font-family: "Poppins", sans-serif;
  padding: 20px 0 15px 23px;
  display: block;
  border-bottom: 1px solid #D6DCE0;
  box-shadow: 0px 1px #FFF;
  -webkit-transition: color 0.15s linear;
  -moz-transition: color 0.15s linear;
  -o-transition: color 0.15s linear;
  transition: color 0.15s linear;
}
#docs #guide .logo a:hover {
  color: #858585;
  text-decoration: none;
}
#docs #guide .menu > li.active > .nav {
  display: block;
}
#docs #guide .menu > li.active > a {
  background: #DEEAF1;
}
#docs #guide .menu > li a {
  color: #222222;
  font-weight: 500;
  font-size: 13px;
  padding: 10px 15px 10px 25px;
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
#docs #guide .menu > li a:hover {
  background: #DEEAF1;
}
#docs #guide .menu > li > .nav {
  margin-bottom: 7px;
  display: none;
}
#docs #guide .menu > li > .nav li a {
  font-weight: 400;
  color: #48A0D6;
  padding: 6px 15px 5px 35px;
}
#docs #api-docs {
  margin-top: 70px;
  background: #FFF;
  margin-left: 210px;
  min-width: 750px;
}

.method-example {
  background: #292E33;
  border-top: 1px solid #000;
  box-shadow: inset 0px 1px rgba(255, 255, 255, 0.17);
  color: #fff;
}
.method-example pre {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}
.method-example pre code {
  background: none;
  font-family: Monaco, Consolas, Menlo, monospace;
  font-size: 12px;
  display: none;
  color: #DAE4F2;
}
.method-example pre code.always-visible {
  display: block !important;
}
.method-example pre code.ruby {
  display: block;
}
.method-example pre code > * {
  color: #DAE4F2;
  line-height: 20px;
}
.method-example pre .ruby {
  color: #DAE4F2;
}
.method-example pre .ruby > * {
  color: #DAE4F2;
  line-height: 20px;
}
.method-example pre .ruby [class*=keyword] {
  color: #9AB4DB;
}
.method-example pre .ruby [class*=string] {
  color: #DAD0C6;
}
.method-example pre .ruby [class*=comment] {
  color: #B4B4B4;
}
.method-example pre .ruby [class*=constant] {
  color: #FFDF9D;
}
.method-example pre .ruby [class*=symbol] {
  color: #9ECBEE;
}
.method-example pre .python {
  color: #DAE4F2;
}
.method-example pre .python > * {
  color: #DAE4F2;
  line-height: 20px;
}
.method-example pre .python [class*=keyword] {
  color: #9AB4DB;
}
.method-example pre .python [class*=string] {
  color: #DAD0C6;
}
.method-example pre .python [class*=comment] {
  color: #B4B4B4;
}
.method-example pre .python [class*=class] {
  color: #FFDF9D;
}
.method-example pre .python [class*=params] {
  color: #9ECBEE;
}
.method-example pre .php {
  color: #DAE4F2;
}
.method-example pre .php > * {
  color: #DAE4F2;
  line-height: 20px;
}
.method-example pre .php [class*=keyword] {
  color: #9AB4DB;
}
.method-example pre .php [class*=string] {
  color: #DAD0C6;
}
.method-example pre .php [class*=comment] {
  color: #B4B4B4;
}

.method-description {
  width: 100%;
  float: left;
  padding: 0 30px;
  border-top: 1px solid #E5E7EB;
  padding-top: 50px;
}
.method-description h3 {
  margin-bottom: 10px;
}

.flex-sm-column a {
  color: #222;
  font-size: 16px;
  font-weight: 300;
}

.padding-right-zero {
  padding-right: 0px !important;
}

.padding-zero {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.fill-color {
  background: #292E33;
}

.selected-section {
  font-weight: bold;
}

/* =================================== */
/*  Support Pages Styles
/* =================================== */
.change-color-motion {
  display: inline-block;
  font-size: 30px;
  color: purple;
  animation: colors1 3s linear infinite, motion1 1.4s ease-out 1;
  width: 130px;
  min-width: 130px;
  max-width: 130px;
}

.img-shadow {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
}

@keyframes colors1 {
  0% {
    color: purple;
  }
  50% {
    color: blue;
  }
  100% {
    color: purple;
  }
}
@keyframes motion1 {
  from {
    transform: translateY(-1em) translateX(-4em) scale(0.2) rotate(45deg);
    opacity: 0;
  }
  to {
    transform: translateY(0em) translateX(0em) rotate(0deg);
    opacity: 1;
  }
}
.support-section .small-title {
  padding-top: 8px;
}
.support-section .a-underline-blue {
  display: inline-block;
  margin-top: 20px;
  color: #0056b3;
  font-size: 17px;
}
.support-section .a-underline-blue:hover {
  color: #0056b3;
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
}
.support-section h4 {
  border-bottom: 1px solid #222222;
}

a.main-button {
  background-color: #ac21d1;
  border-radius: 5px;
  color: white;
  margin: 0px 0px 0px 10px;
}

a.main-button:hover {
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
}

.support-image {
  margin-top: 40px;
}

.text-style {
  margin-top: 0px;
}

.a-underline-blue {
  display: inline-block;
  margin-top: 20px;
  color: #0056b3;
  font-size: 16px;
}

.a-underline-blue:hover {
  color: #0056b3;
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
}

.support-div {
  margin-bottom: 40px;
}
.support-div h4 {
  margin-bottom: 20px !important;
}
.support-div img.support-image {
  margin: 32px 0px 16px 0px;
}
.support-div ol, .support-div ul {
  list-style: initial;
  margin: initial;
  padding: 10px 0 20px 40px;
}
.support-div li {
  display: list-item;
  margin-bottom: 0.5em;
  /* font-weight: bold; */
}
.support-div ol {
  list-style: decimal;
}

.ti-arrow-right:before {
  content: "\e628";
  font-weight: 800;
  font-size: smaller;
}

.faq-page-section-box {
  break-inside: avoid;
  padding: 24px;
  border: 1px solid #d3ddde;
  border-radius: 4px;
  margin: 0 12px 17px 0;
}

/* =================================== */
/*  Integration Styles
/* =================================== */
.onwc_arrow {
  font-family: monospace;
  font-size: larger;
}

.read-more-integration-section .a-underline-blue {
  display: inline-block;
  color: #0056b3;
  font-size: 16px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.read-more-integration-section .a-underline-blue:hover {
  color: #0056b3;
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
}

.detailed-instructions-section .img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
.detailed-instructions-section h3 {
  margin-bottom: 12px;
  /* border-bottom: 1px solid #222222; */
}
.detailed-instructions-section h4 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.detailed-instructions-section .support-image {
  margin: 40px 0px 80px 0px;
}
.detailed-instructions-section .instr-num {
  display: block;
  font-weight: bold;
  color: #4169e1;
  margin-bottom: 10px;
}
.detailed-instructions-section p {
  font-size: 18px;
}

.section-title-integration {
  margin-bottom: 100px;
}

.journal-theme-instructions-border {
  border: 3px solid transparent;
  padding: 40px;
  margin-top: 60px;
  width: 100%;
  text-align: center;
  background-color: #2a3141;
  box-shadow: 0px 3px 18px -5px rgba(0, 0, 0, 0.3);
}
.journal-theme-instructions-border p {
  color: white;
  margin: 0px;
}
.journal-theme-instructions-border a {
  margin-top: 40px;
}

.emphasize-star {
  font-size: 140%;
  font-weight: bold;
  color: #FF512F;
}

/* =================================== */
/*  Advantages Styles
/* =================================== */
.advantages-section .blockquote {
  border-left: 5px solid #4169e1;
  font-size: 14px;
  margin-bottom: 35px;
  margin-left: 20px;
  margin-top: 35px;
  padding-left: 15px;
}
.advantages-section .brooks {
  position: relative;
  font-size: 1.8em;
  line-height: 1.3em;
  color: #222222;
}
.advantages-section .brooks:before {
  content: "“";
  position: absolute;
  top: 0.25em;
  left: -0.3em;
  font-size: 6em;
  z-index: -1;
}
.advantages-section div {
  text-align: center;
}
.advantages-section div span {
  font-size: 40px;
  color: #4169e1;
  padding-bottom: 25px;
  display: inline-block;
}
.advantages-section div .big-img-border {
  font-size: 100px;
  color: #4169e1;
  padding: 50px;
  display: inline-block;
  border-radius: 25px;
  border: 1px solid #4169e1;
}
.advantages-section div .img-border {
  font-size: 60px;
  color: #4169e1;
  padding: 30px;
  display: inline-block;
  border-radius: 25px;
  border: 1px solid #4169e1;
  margin-bottom: 30px;
}
.advantages-section .advantages-images {
  margin-bottom: 30px;
}

.live-chat-advantages {
  font-size: 18px;
}

.help-block ul, .help-block li {
  color: #cc2e2e;
  font-size: 17px;
}

.bubble-header {
  background-color: white;
  padding: 0.4rem 16px;
  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.3);
  display: inline-block;
  border-radius: 25px 25px 25px 0px;
}

.li-status-select:hover {
  cursor: pointer;
  background-color: #f5f5f5;
}

.li-status-select {
  padding-right: 14px;
  display: inline-flex;
  width: 100%;
  margin: auto;
}

.greendot {
  height: 11px;
  width: 11px;
  background-color: #69aa46;
  border-radius: 50%;
  display: inline-block;
  margin-right: 3px;
  margin-top: 1px;
}

.graydot {
  height: 11px;
  width: 11px;
  background-color: #777;
  border-radius: 50%;
  display: inline-block;
  margin-right: 3px;
  margin-top: 1px;
}

#landing-page-youtube-video-div {
  text-align: center;
  padding: 120px;
}

#onwebchat-video-container {
  border-radius: 12px;
  margin-top: 40px;
  margin-bottom: 0px;
  text-align: center;
  width: 100%;
  max-width: 1100px; /* Adjust as needed */
  margin: auto;
  border-radius: 12px;
  overflow: hidden;
}

#onWebChatVideo {
  width: 100%;
  height: auto;
  border-radius: 12px !important;
  overflow: hidden;
}