/*

TemplateMo 568 DigiMedia

https://templatemo.com/tm-568-digimedia

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

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

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  font-weight: 300;
  color: #afafaf;
}

img {
 /* width: 100%;*/
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #4da6e7;
  color: #fff !important;
}

::-moz-selection {
  background: #4da6e7;
  color: #fff !important;
}


.item .thumb{
  background-size: cover;
  width: 60px;
  height: 60px;
  float: left;
  margin-right: 10px;
  border-radius: 50%;
}
.item .date{color:#888;}

.more{margin-top:20px;}

form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}

form.example button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}

form.example button:hover {
background: #0b7dda;
}

form.example::after {
content: "";
clear: both;
display: table;
}
.button-body {
  display:none;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}

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

.section-heading h6 {
  font-size: 15px;
  font-weight: 700;
  color: #4da6e7;
  text-transform: none!important;
  margin-bottom: 15px;
}

.section-heading h4 {
  color: #2a2a2a;
  font-size: 2.2rem;
  font-weight: 700;
  text-transform: none!important;
  margin-bottom: 25px;
}

.section-heading h4 em {
  font-style: normal;
  color: #4da6e7;
}

.section-heading .line-dec {
  width: 50px;
  height: 2px;
  background-color: #4da6e7;
}

.border-first-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #4da6e7 !important;
  border: 1px solid #4da6e7 !important;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
}

.border-first-button a:hover {
  background-color: #4da6e7;
  color: #fff !important;
}


.side-bar h4 {
  background-color: #5D91E7;
}
.archives-list i {
  font-size: 16px;
  margin-right: 5px;
  color: #5D91E7;
}
.recent-post-info span {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #5D91E7;
}
.navbar-brand h1 {
  width:48%!important;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
  border-bottom: 2px solid rgba(216, 216, 216, 0.18);
  z-index: 15;
}
body.admin-bar header {
  top: 32px;
}
@media all and (max-width: 1061px) {
  header {
      border-bottom-color: #e7e7e7;
  }
  header > div.container > div.row > div.left {
      min-height: 59px;
  }
}
header div.media {
  background-color: #2797fe;
}
@media all and (max-width: 767px) {
  header div.media {
      display: none;
      position: fixed;
      top: 60px;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 21;
  }
}
header div.media div.container {
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  max-height: 100px;
  transition: max-height 250ms;
  max-width: 90%;
}
@media all and (max-width: 767px) {
  header div.media div.container {
      padding-left: 0;
      padding-right: 0;
  }
}
header div.media div.container:after {
  content: "";
  position: absolute;
  right: 0;
  width: 1px;
  top: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.14);
}
@media all and (max-width: 767px) {
  header div.media div.container:after {
      display: none;
  }
  .navbar-brand h1 {
    width:48%!important;
  }
}
header div.media div.video,
header div.media div.podcast {
  position: relative;
}
header div.media div.video {
  position: relative;
}
@media all and (min-width: 1062px) {
  header div.media div.video {
      padding-left: 0;
  }
  .navbar-brand h1 {
    width:48%!important;
  }
}
header div.media div.video a {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 16px;
}
@media all and (max-width: 767px) {
  header div.media div.video a {
      flex-direction: column;
      line-height: 1.625;
  }
}
header div.media div.video a span.label {
  font-weight: 700;
  margin: 0 22px 0 0;
  white-space: pre;
}
@media all and (max-width: 767px) {
  header div.media div.video a span.label {
      margin: 2rem 0 1rem;
      font-size: 1.3rem;
  }
}
header div.media div.video a div.thumbnail {
  margin: 0 19px 0 0;
  position: relative;
}
@media all and (max-width: 767px) {
  header div.media div.video a div.thumbnail {
      margin: 0 0 1rem;
      width: 100%;
  }
}
header div.media div.video a div.thumbnail img {
  border-radius: 5px;
  border: 1px solid white;
  max-width: 74px;
  height: auto;
}
@media all and (max-width: 767px) {
  header div.media div.video a div.thumbnail img {
      max-width: 100%;
      width: 100%;
      border-radius: 15px;
  }
}
header div.media div.video a div.thumbnail svg {
  position: absolute;
  top: calc(50% - 17px);
  left: calc(50% - 17px);
}
@media all and (min-width: 768px) {
  header div.media div.video a div.title-container {
      position: relative;
      overflow: hidden;
  }
}
@media all and (max-width: 767px) {
  header div.media div.video a div.title-container span.title {
      text-align: center;
      font-size: 1.25rem;
      display: block;
  }
}
header div.media a.toggle {
  display: block;
  position: absolute;
  left: calc(100% + 12px);
  top: calc(50% - 19px);
  bottom: 0;
  width: 38px;
  height: 38px;
  padding: 10px;
}
@media all and (min-width: 1299px) {
  header div.media a.toggle {
      left: calc(101.5%);
  }
}
@media all and (max-width: 1061px) {
  header div.media a.toggle {
      left: 100%;
  }
  .navbar-brand {
    width:48%!important;
  }
}
@media all and (max-width: 767px) {
  header div.media a.toggle {
      display: none;
  }
}
header div.media a.toggle span {
  display: block;
  background-color: white;
  position: absolute;
  transition: transform 250ms, opacity 250ms;
}
header div.media a.toggle span.horizontal {
  width: 18px;
  height: 3px;
  left: calc(50% - 9px);
  top: calc(50% - 1.5px);
}
header div.media a.toggle span.vertical {
  width: 3px;
  height: 18px;
  top: calc(50% - 9px);
  left: calc(50% - 1.5px);
  opacity: 0;
}
header div.media.closed div.container {
  max-height: 32px;
  z-index: 0;
}
header div.media.closed div.video,
header div.media.closed div.podcast {
  opacity: 0;
}
header div.media.closed a.toggle span.horizontal {
  transform: rotate(180deg);
}
header div.media.closed a.toggle span.vertical {
  transform: rotate(180deg);
  opacity: 1;
}
header div.container {
  max-width: 90%;
}
@media all and (max-width: 767px) {
  header div.container {
      max-width: 100%;
  }
}
header div.left,
header div.right {
  display: flex;
  position: static;
  align-items: center;
  padding-right: 5px;
  padding-left: 0px;
}
header div.left {
  justify-content: flex-start;
}
@media all and (max-width: 1061px) {
  header div.left {
      justify-content: space-between;
      flex-direction: row-reverse;
      position: relative;
  }
}
header div.left div.toggle-container {
  display: none;
  height: 100%;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #e7e7e7;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}
@media all and (max-width: 767px) {
  header div.left div.toggle-container {
      display: flex;
  }
}
header div.left a.toggle {
  display: block;
  width: 38px;
  height: 38px;
  padding: 10px;
}
header div.left a.toggle span {
  display: block;
  background-color: #2797fe;
  position: absolute;
  transition: transform 250ms, opacity 250ms;
}
header div.left a.toggle span.horizontal {
  width: 18px;
  height: 2px;
  left: calc(50% - 9px);
  top: calc(50% - 1px);
}
header div.left a.toggle span.vertical {
  width: 2px;
  height: 18px;
  top: calc(50% - 9px);
  left: calc(50% - 1px);
}
header.media-open div.media {
  display: block;
}
header.media-open div.left div.toggle-container {
  display: none;
}
header div.right {
  justify-content: flex-end;
}
header div.logo {
  margin: 0 23px 0 0;
}
@media all and (max-width: 1299px) {
  header div.logo {
      margin-right: 10px;
  }
}
@media all and (max-width: 767px) {
  header div.logo {
      margin: 0 auto;
  }
}
header div.logo img {
  width: 107px;
  height: auto;
}
header div.hamburger {
  display: none;
  font: inherit;
  overflow: visible;
  margin: 0;
  padding: 15px;
  cursor: pointer;
  transition-timing-function: linear;
  transition-duration: 0.15s;
  transition-property: opacity, filter;
  text-transform: none;
  color: inherit;
  border: 0;
  background-color: transparent;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 21;
}
@media all and (max-width: 1061px) {
  header div.hamburger {
      display: inline-block;
  }
}
header div.hamburger div.hamburger-box {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  perspective: 80px;
  transform: scale(0.75);
  top: 3px;
}
header div.hamburger div.hamburger-box div.hamburger-inner,
header div.hamburger div.hamburger-box div.hamburger-inner::after,
header div.hamburger div.hamburger-box div.hamburger-inner::before {
  position: absolute;
  width: 40px;
  height: 3px;
  transition-timing-function: ease;
  transition-duration: 0.15s;
  transition-property: transform;
  border-radius: 4px;
  background-color: #2797fe;
}
header div.hamburger div.hamburger-box div.hamburger-inner::after,
header div.hamburger div.hamburger-box div.hamburger-inner::before {
  transition: transform 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s, width 0.1s;
  display: block;
  content: "";
}
header div.hamburger div.hamburger-box div.hamburger-inner::before {
  top: -10px;
}
header div.hamburger div.hamburger-box div.hamburger-inner::after {
  bottom: -10px;
}
header div.hamburger div.hamburger-box div.hamburger-inner {
  top: 50%;
  display: block;
  margin-top: -2px;
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s;
}
header div.hamburger.open div.hamburger-box div.hamburger-inner,
header div.hamburger.media-open div.hamburger-box div.hamburger-inner {
  transform: rotateX(180deg) rotateY(180deg);
  background-color: transparent !important;
}
header div.hamburger.open div.hamburger-box div.hamburger-inner,
header div.hamburger.open div.hamburger-box div.hamburger-inner::before,
header div.hamburger.open div.hamburger-box div.hamburger-inner::after,
header div.hamburger.media-open div.hamburger-box div.hamburger-inner,
header div.hamburger.media-open div.hamburger-box div.hamburger-inner::before,
header div.hamburger.media-open div.hamburger-box div.hamburger-inner::after {
  background-color: #2797fe;
}
header div.hamburger.open div.hamburger-box div.hamburger-inner::before,
header div.hamburger.media-open div.hamburger-box div.hamburger-inner::before {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}
header div.hamburger.open div.hamburger-box div.hamburger-inner::after,
header div.hamburger.media-open div.hamburger-box div.hamburger-inner::after {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
}
header div.hamburger.open.back div.hamburger-box div.hamburger-inner,
header div.hamburger.media-open.back div.hamburger-box div.hamburger-inner {
  background-color: #2797fe !important;
}
header div.hamburger.open.back div.hamburger-box div.hamburger-inner,
header div.hamburger.open.back div.hamburger-box div.hamburger-inner::before,
header div.hamburger.open.back div.hamburger-box div.hamburger-inner::after,
header div.hamburger.media-open.back div.hamburger-box div.hamburger-inner,
header div.hamburger.media-open.back div.hamburger-box div.hamburger-inner::before,
header div.hamburger.media-open.back div.hamburger-box div.hamburger-inner::after {
  background-color: #2797fe;
}
header div.hamburger.open.back div.hamburger-box div.hamburger-inner::before,
header div.hamburger.media-open.back div.hamburger-box div.hamburger-inner::before {
  transform: translate3d(21px, 3px, 0) rotate(45deg);
  width: 20px;
}
header div.hamburger.open.back div.hamburger-box div.hamburger-inner::after,
header div.hamburger.media-open.back div.hamburger-box div.hamburger-inner::after {
  transform: translate3d(21px, -3px, 0) rotate(-45deg);
  width: 20px;
}
header nav {
  height: 100%;
  flex-grow: 1;
  position: relative;
}
@media all and (max-width: 1061px) {
  header nav {
      display: none;
  }
}
header nav > form {
  display: none;
}
header nav .menu-main-menu-container {
  height: 100%;
  flex-grow: 1;
}
header nav .menu-main-menu-container > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
}
@media all and (max-width: 1061px) {
  header nav .menu-main-menu-container > ul {
      flex-direction: column;
  }
}
header nav .menu-main-menu-container > ul > li {
  height: 100%;
  padding-top: 20px;
}
@media all and (max-width: 1061px) {
  header nav .menu-main-menu-container > ul > li {
      width: 100%;
      padding-left: 15px;
      padding-right: 15px;
  }
}
header nav .menu-main-menu-container > ul > li.menu-item-has-children > a {
  padding-right: 35px;
  pointer-events: none;
}
@media all and (max-width: 1061px) {
  header nav .menu-main-menu-container > ul > li.menu-item-has-children > a {
      padding-right: 0;
  }
}
header nav .menu-main-menu-container > ul > li.menu-item-has-children > a::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='10px' height='6px' viewBox='0 0 10 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group-2' transform='translate(-334.000000, -29.000000)'%3E%3Cg id='Actions-/-Navigation-/-chevron--down-/-24' transform='translate(339.000000, 32.131250) scale(1, -1) translate(-339.000000, -32.131250) translate(334.625000, 29.637500)' fill='%23333742'%3E%3Cpolygon id='Fill' transform='translate(4.375000, 2.493750) scale(1, -1) translate(-4.375000, -2.493750) ' points='4.375 4.9875 0 0.6125 0.6125 0 4.375 3.7625 8.1375 0 8.75 0.6125'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
  width: 8.75px;
  height: 4.99px;
  display: block;
  position: absolute;
  right: 15px;
  top: 7px;
  transition: transform 250ms;
}
@media all and (max-width: 1061px) {
  header nav .menu-main-menu-container > ul > li.menu-item-has-children > a::after {
      right: auto;
      left: calc(100% + 10px);
  }
}
@media all and (max-width: 1061px) {
  header nav .menu-main-menu-container > ul > li.menu-item-has-children > a::after {
      right: 15px;
      left: auto;
  }
}
header nav .menu-main-menu-container > ul > li.menu-item-has-children:hover,
header nav .menu-main-menu-container > ul > li.menu-item-has-children.open {
  background-color: #f8f8f8;
}
@media all and (max-width: 1061px) {
  header nav .menu-main-menu-container > ul > li.menu-item-has-children:hover,
  header nav .menu-main-menu-container > ul > li.menu-item-has-children.open {
      background-color: white;
  }
}
header nav .menu-main-menu-container > ul > li.menu-item-has-children:hover > a,
header nav .menu-main-menu-container > ul > li.menu-item-has-children.open > a {
  position: relative;
}
header nav .menu-main-menu-container > ul > li.menu-item-has-children:hover > a::after,
header nav .menu-main-menu-container > ul > li.menu-item-has-children.open > a::after {
  transform: rotate(180deg);
}
header nav .menu-main-menu-container > ul > li.menu-item-has-children:hover > a::before,
header nav .menu-main-menu-container > ul > li.menu-item-has-children.open > a::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #333743;
  z-index: 11;
}
@media all and (max-width: 1061px) {
  header nav .menu-main-menu-container > ul > li.menu-item-has-children:hover > a::before,
  header nav .menu-main-menu-container > ul > li.menu-item-has-children.open > a::before {
      display: none;
  }
}
header nav .menu-main-menu-container > ul > li.menu-item-has-children:hover > ul,
header nav .menu-main-menu-container > ul > li.menu-item-has-children.open > ul {
  display: flex;
}
@media all and (max-width: 1061px) {
  header nav .menu-main-menu-container > ul > li.menu-item-has-children:hover > ul,
  header nav .menu-main-menu-container > ul > li.menu-item-has-children.open > ul {
      position: static;
      padding-bottom: 1rem;
  }
}
header nav .menu-main-menu-container > ul > li > a {
  color: #333743;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 15px 20px;
  position: relative;
  font-weight: 600;
  letter-spacing: -0.14px;
  line-height: calc(24 / 18);
}
@media all and (max-width: 1061px) {
  header nav .menu-main-menu-container > ul > li > a {
      padding-right: 0;
      font-size: 20px;
  }
}
header nav .menu-main-menu-container > ul > li > a:hover {
  text-decoration: none;
}
header nav .menu-main-menu-container > ul > li > ul {
  display: none;
  list-style: none;
  margin: 0;
  padding: 33px 45px;
  background-color: white;
  position: absolute;
  z-index: 10;
  top: 100%;
  left: -20px;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 30px;
  border-top: 2px solid rgba(216, 216, 216, 0.18);
}
@media all and (max-width: 1061px) {
  header nav .menu-main-menu-container > ul > li > ul {
      box-shadow: none;
      width: 100%;
      flex-direction: column;
      padding: 2rem 15px 0;
  }
  header nav .menu-main-menu-container > ul > li > ul.open {
      position: fixed;
      top: 120px;
      left: 0;
      right: 0;
      bottom: 0;
      overflow-y: scroll;
      overflow-x: hidden;
      z-index: 21;
  }
}
@media all and (max-width: 767px) {
  header nav .menu-main-menu-container > ul > li > ul.open {
      top: 60px;
  }
}
header nav .menu-main-menu-container > ul > li > ul > li {
  min-width: 200px;
}
header nav .menu-main-menu-container > ul > li > ul > li:not(:last-child) {
  padding: 0 33px 0 0;
  border-right: 1px solid #f5f5f5;
}
@media all and (max-width: 1061px) {
  header nav .menu-main-menu-container > ul > li > ul > li:not(:last-child) {
      padding-right: 0;
      border-right: none;
      margin-bottom: 2rem;
  }
}
header nav .menu-main-menu-container > ul > li > ul > li:not(:first-child) {
  padding: 0 0 0 39px;
}
@media all and (max-width: 1061px) {
  header nav .menu-main-menu-container > ul > li > ul > li:not(:first-child) {
      padding-left: 0;
  }
}
header nav .menu-main-menu-container > ul > li > ul > li:not(:last-child):not(:first-child) {
  padding: 0 33px 0 39px;
}
@media all and (max-width: 1061px) {
  header nav .menu-main-menu-container > ul > li > ul > li:not(:last-child):not(:first-child) {
      padding-left: 0;
      padding-right: 0;
  }
}
header nav .menu-main-menu-container > ul > li > ul > li > a {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.83px;
  line-height: calc(13 / 10);
  padding: 0 0 16px;
  color: #333743;
  display: block;
  white-space: nowrap;
  pointer-events: none;
}
header nav .menu-main-menu-container > ul > li > ul > li > a:hover {
  text-decoration: none;
}
header nav .menu-main-menu-container > ul > li > ul > li > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
header nav .menu-main-menu-container > ul > li > ul > li > ul > li:last-child > a {
  padding-bottom: 0;
}
header nav .menu-main-menu-container > ul > li > ul > li > ul > li > a {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.12px;
  color: #333743;
  line-height: calc(15 / 12);
  white-space: nowrap;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
header nav .menu-main-menu-container > ul > li > ul > li > ul > li > a .icon {
  display: block;
  width: 21px;
  height: 21px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-right: 9px;
  order: -1;
}
header nav > ul {
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  font-size: 14px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}
header nav > ul > li {
  height: 100%;
}
@media all and (min-width: 1200px) {
  header nav > ul > li {
      margin: 0 10px 0 0;
  }
  header nav > ul > li:nth-last-child(2) {
      margin-right: 0;
  }
}
header nav > ul > li.courses {
  display: none;
}
header nav > ul > li > a {
  color: #333743;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 8px 20px;
  position: relative;
  text-transform: uppercase;
}
header nav > ul > li > a::after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  right: 0px;
  width: 5px;
  height: 2px;
  background-image: url("https://cdn-gipkp.nitrocdn.com/qmKditVdqQpIcIBEgzmnkZSBPqDUJTGs/assets/images/optimized/rev-38413ad/wp-content/themes/copyhackers/./images/menu-triangle.svg");
  transition: transform 100ms;
}
header nav > ul > li > a.currentPage {
  color: #333743;
  font-weight: bold;
  letter-spacing: -0.3px;
}
header nav > ul > li > a.currentPage::before {
  content: " ";
  position: absolute;
  height: 2px;
  margin: 0 auto;
  left: 7px;
  right: 0;
  width: 95%;
  bottom: 17px;
  background: #2797fe;
}
header nav > ul > li div.sub-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  top: 100%;
  width: 100%;
  background-color: white;
  border-top: 2px solid rgba(216, 216, 216, 0.18);
  padding: 30px 0;
  box-shadow: 0 30px 20px rgba(62, 114, 126, 0.16);
  overflow-y: auto;
  max-height: calc(100vh - 130px);
}
header nav > ul > li div.sub-menu div.col {
  padding-left: 160px;
}
header nav > ul > li div.sub-menu div.featured {
  background-color: #eef3f4;
  margin-top: -30px;
  margin-bottom: -30px;
  padding: 30px 30px 30px 0px;
  position: relative;
}
header nav > ul > li div.sub-menu div.featured::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 2000px;
  background-color: #eef3f4;
  display: block;
  height: 100%;
}
@media all and (max-width: 1061px) {
  header nav > ul > li div.sub-menu div.featured::before {
      background-color: transparent;
  }
}
header nav > ul > li div.sub-menu div.featured div.course-title {
  margin-bottom: 12px;
}
header nav > ul > li div.sub-menu div.featured div.price {
  font-size: 16px;
  margin: 0 0 20px;
}
header nav > ul > li div.sub-menu div.featured div.price span.now {
  font-weight: 600;
  color: #309833;
  display: inline-block;
  margin: 0 0 0 10px;
}
header nav > ul > li div.sub-menu div.featured div.image a {
  display: block;
  transition: transform 250ms;
  transform-origin: center center;
}
header nav > ul > li div.sub-menu div.featured div.image a:hover {
  transform: scale(1.05);
}
header nav > ul > li div.sub-menu div.featured div.image img {
  border-radius: 18.5px;
  max-width: 100%;
  box-shadow: 0 10px 30px 0 rgba(87, 110, 115, 0.38);
}
header nav > ul > li div.sub-menu div.featured hr {
  width: 100%;
  height: 1px;
  border: none;
  background-color: #dadada;
  margin: 37px 0 28px;
}
header nav > ul > li div.sub-menu div.featured div.our-team {
  width: 100%;
  margin: 25px auto 0;
}
header nav > ul > li div.sub-menu div.featured div.our-team div.person {
  width: 100%;
  display: none;
}
header nav > ul > li div.sub-menu div.featured div.our-team div.person.active {
  display: block;
}
header nav > ul > li div.sub-menu div.featured div.our-team a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
header nav > ul > li div.sub-menu div.featured div.our-team a:hover {
  text-decoration: none;
}
header nav > ul > li div.sub-menu div.featured div.our-team a img {
  border-radius: 50%;
  width: 225px;
  height: auto;
  max-width: 100%;
  border: 5px solid white;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.12);
}
header nav > ul > li div.sub-menu div.featured div.our-team a div.banner {
  background-image: url("https://cdn-gipkp.nitrocdn.com/qmKditVdqQpIcIBEgzmnkZSBPqDUJTGs/assets/images/optimized/rev-38413ad/wp-content/themes/copyhackers/./images/banner.svg");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  max-width: 328px;
  margin: -30px auto 0;
  padding: 13px 0 15px;
}
header nav > ul > li div.sub-menu div.featured div.our-team a div.banner.nitro-lazy {
  background-image: none !important;
}
header nav > ul > li div.sub-menu div.featured div.our-team a div.banner span.name {
  font-size: 21.6px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  display: block;
  color: #393939;
}
header nav > ul > li div.sub-menu div.featured div.our-team a div.banner span.title {
  font-size: 14.4px;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  display: block;
  color: #393939;
}
header nav > ul > li div.sub-menu div.featured ul.pages {
  margin: 18px auto 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media all and (max-width: 767px) {
  header nav > ul > li div.sub-menu div.featured ul.pages {
      display: none;
  }
}
header nav > ul > li div.sub-menu div.featured ul.pages li:first-child:nth-last-child(1) {
  display: none;
}
header nav > ul > li div.sub-menu div.featured ul.pages li.active button {
  background-color: #2797fe;
}
header nav > ul > li div.sub-menu div.featured ul.pages li button {
  -webkit-appearance: none;
  width: 23px;
  height: 5px;
  background-color: white;
  display: block;
  border: none;
  border-radius: 0;
  margin: 0 2px;
}
@media all and (max-width: 1061px) {
  header nav > ul > li div.sub-menu div.featured ul.pages li button {
      background-color: #ccc;
  }
}
header nav > ul > li div.sub-menu div.featured ul.pages li button:active,
header nav > ul > li div.sub-menu div.featured ul.pages li button:focus {
  outline: none;
  box-shadow: none;
}
header nav > ul > li div.sub-menu div.featured div.mobile-nav {
  display: none;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
}
@media all and (max-width: 767px) {
  header nav > ul > li div.sub-menu div.featured div.mobile-nav {
      display: flex;
  }
}
header nav > ul > li div.sub-menu div.featured div.mobile-nav button {
  -webkit-appearance: none;
  background: transparent;
  border: none;
  margin: 0 10px;
}
header nav > ul > li div.sub-menu div.featured div.mobile-nav button:active,
header nav > ul > li div.sub-menu div.featured div.mobile-nav button:focus {
  outline: none;
  box-shadow: none;
}
header nav > ul > li div.sub-menu div.featured div.mobile-nav div.index {
  font-size: 16px;
}
header nav > ul > li div.sub-menu div.featured div.mobile-nav div.index span {
  color: #2797fe;
  font-weight: 700;
}
header nav > ul > li div.sub-menu div.border-right {
  border-right: 1px solid #ececec;
}
header nav > ul > li div.sub-menu div.padding {
  padding-left: 30px;
  padding-right: 30px;
}
header nav > ul > li div.sub-menu div.course-title,
header nav > ul > li div.sub-menu div.sub-menu-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 18px;
}
header nav > ul > li div.sub-menu div.sub-menu-sub-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 15px;
}
header nav > ul > li div.sub-menu span.title {
  font-weight: bold;
  font-size: 14px;
  display: block;
  margin: 0 0 10px;
}
header nav > ul > li div.sub-menu a.all-courses {
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
}
header nav > ul > li div.sub-menu ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
header nav > ul > li div.sub-menu ul li.first-title > span {
  display: block;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 18px;
}
header nav > ul > li div.sub-menu ul li.second-title > span {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 15px;
}
header nav > ul > li div.sub-menu ul li.blue {
  margin-top: 18px;
}
header nav > ul > li div.sub-menu ul li.blue > a {
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  color: #2797fe;
}
header nav > ul > li div.sub-menu ul li.blue > a:hover {
  color: #017ef1;
}
header nav > ul > li div.sub-menu ul li a {
  text-decoration: underline;
  font-size: 14px;
  line-height: 1.78;
  color: #333743;
}
header nav > ul > li div.sub-menu ul li a:hover {
  color: black;
}
header nav > ul > li div.sub-menu ul.social {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 34px;
}
header nav > ul > li div.sub-menu ul.social li {
  margin: 0 10px 0 0;
}
header nav > ul > li div.sub-menu ul.social li:last-child {
  margin-right: 0;
}
header nav > ul > li div.sub-menu ul.social li a {
  transition: transform 100ms;
  display: block;
}
header nav > ul > li div.sub-menu ul.social li a:hover {
  transform: translateY(-3px);
}
header nav > ul > li div.sub-menu ul.social li img {
  width: 16px;
  height: 16px;
}
header nav > ul > li div.sub-menu div.articles {
  padding-bottom: 40px;
}
header nav > ul > li div.sub-menu div.articles a.blog {
  font-weight: 600;
  margin: 0 0 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
header nav > ul > li div.sub-menu div.articles a.blog img {
  padding-right: 12px;
}
header nav > ul > li div.sub-menu div.articles span.category {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 2px;
  display: block;
  margin: 0 0 10px;
}
header nav > ul > li div.sub-menu div.articles span.category.copywriting {
  color: #009dc1;
}
header nav > ul > li div.sub-menu div.articles span.category.digital-marketing {
  color: #bb007f;
}
header nav > ul > li div.sub-menu div.articles span.category.freelancing {
  color: #0fbb00;
}
header nav > ul > li div.sub-menu div.articles p {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 20px;
}
header nav > ul > li div.sub-menu div.articles a.read-more {
  text-decoration: underline;
  font-size: 16px;
  font-weight: 600;
}
header nav > ul > li div.sub-menu div.articles a.all-content {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eef3f4;
  font-size: 16px;
  font-weight: 600;
}
header nav > ul > li div.sub-menu div.articles a.all-content:hover {
  background-color: #dfe8ea;
}
header nav > ul > li div.sub-menu div.articles a.all-content span {
  text-decoration: underline;
}
header nav > ul > li div.sub-menu div.articles a.all-content img {
  margin: 0 0 0 20px;
}
header nav > ul > li:hover > a {
  color: #333743;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: -0.3px;
}
header nav > ul > li:hover > a::after {
  transform: rotate(180deg);
}
header nav > ul > li:hover div.sub-menu {
  display: block;
}
@media all and (max-width: 1061px) {
  header div.hamburger.open + nav {
      display: flex;
      position: fixed;
      top: 60px;
      left: 0;
      bottom: 0;
      width: 100%;
      z-index: 20;
      background-color: white;
      flex-direction: column;
      overflow-y: scroll;
      height: auto;
  }
}
@media all and (max-width: 1061px) and (min-width: 768px) and (max-width: 1061px) {
  header div.hamburger.open + nav {
      top: 124px;
  }
  body.media-collapsed header div.hamburger.open + nav {
      top: 92px;
  }
}
@media all and (max-width: 1061px) {
  header div.hamburger.open + nav > form {
      display: block;
  }
  header div.hamburger.open + nav > form input.form-control {
      border-radius: 0;
      border-color: #e7e7e7;
      border-width: 0 0 1px;
      height: calc(1.5em + 2rem + 2px);
      padding: 1rem 0.75rem;
      background-image: url("data:image/svg+xml,%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Mobile_Menu' transform='translate(-284.000000, -82.000000)' fill='%23333743'%3E%3Cpath d='M299.708186,96.294 L296.600531,93.186 C297.475219,92.018 298.000031,90.572 298.000031,89 C298.000031,85.134 294.865231,82 290.999513,82 C287.133795,82 284,85.134 284,89 C284,92.866 287.133795,96 290.999513,96 C292.57194,96 294.017689,95.475 295.18595,94.6 L298.293605,97.708 C298.48865,97.903 298.744019,98 299.000393,98 C299.256767,98 299.513141,97.903 299.708186,97.708 C300.097271,97.319 300.097271,96.683 299.708186,96.294 L299.708186,96.294 Z M285.999717,89 C285.999717,86.243 288.242738,84 290.999513,84 C293.756288,84 295.999309,86.243 295.999309,89 C295.999309,91.757 293.756288,94 290.999513,94 C288.242738,94 285.999717,91.757 285.999717,89 L285.999717,89 Z' id='Imported-Layers'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 20px center;
  }
  header div.hamburger.open + nav > form input.form-control.nitro-lazy {
      background-image: none !important;
  }
  header div.hamburger.open + nav > form input.form-control::placeholder {
      color: #e4e4e4;
  }
  header div.hamburger.open + nav > ul {
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      padding: 40px 0 0;
  }
  header div.hamburger.open + nav > ul > li {
      height: auto;
      width: 100%;
  }
  header div.hamburger.open + nav > ul > li.courses {
      display: block;
      margin-top: 3rem;
  }
  header div.hamburger.open + nav > ul > li.courses > a {
      color: white;
      display: block;
      padding: 10px 15px;
      margin: 0 1rem;
      text-transform: none;
  }
  header div.hamburger.open + nav > ul > li > a {
      color: #393939;
      font-size: 20px;
      font-weight: 600;
      height: auto;
      padding: 20px 15px;
  }
  header div.hamburger.open + nav > ul > li > a::after {
      display: none;
  }
  header div.hamburger.open + nav > ul > li div.sub-menu {
      display: none;
      position: static;
      border-top: none;
      box-shadow: none;
      padding: 0;
      max-height: none;
  }
  header div.hamburger.open + nav > ul > li div.sub-menu.open {
      display: block;
      position: fixed;
      top: 120px;
      bottom: 0;
      left: 0;
      right: 0;
      overflow-y: scroll;
      overflow-x: hidden;
      z-index: 21;
  }
  body.media-collapsed header div.hamburger.open + nav > ul > li div.sub-menu.open {
      top: 90px;
  }
  header div.hamburger.open + nav > ul > li div.sub-menu.open div.menu-title {
      text-align: center;
      text-transform: uppercase;
      font-weight: 600;
      font-size: 13px;
      background-color: #eef3f4;
      padding-top: 15px;
      padding-bottom: 15px;
  }
  header div.hamburger.open + nav > ul > li div.sub-menu.open div.menu-title a {
      color: #393939;
  }
  header div.hamburger.open + nav > ul > li div.sub-menu.open div.featured {
      margin-top: 1rem;
      margin-bottom: 2em;
      padding-bottom: 2em;
      background-color: transparent;
      position: relative;
      padding: 0 30px 15px;
  }
  header div.hamburger.open + nav > ul > li div.sub-menu.open div.featured:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 30px;
      right: 30px;
      height: 1px;
      background-color: #dadada;
  }
  header div.hamburger.open + nav > ul > li div.sub-menu.open div.featured div.image {
      margin-bottom: 2em;
  }
  header div.hamburger.open + nav > ul > li div.sub-menu.open div.featured hr {
      display: none;
  }
  header div.hamburger.open + nav > ul > li div.sub-menu .col {
      padding-left: 15px;
  }
}
@media all and (max-width: 767px) {
  header div.hamburger.open + nav > ul > li div.sub-menu.open {
      top: 60px;
  }
  body.media-collapsed header div.hamburger.open + nav > ul > li div.sub-menu.open {
      top: 60px;
  }
}
@media all and (max-width: 1061px) {
  header div.right {
      display: none;
  }
}
header div.right a.btn {
  margin: 0 10px 0 0;
}
@media all and (max-width: 1299px) {
  header div.right a.btn {
      font-size: 13px;
  }
}
header div.right a.btn:last-child {
  margin-right: 0;
}
header div.right a.btn.btn-light {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  text-transform: uppercase;
}
header div.right a.btn.btn-light svg {
  margin: 0 0 0 10px;
}
header div.right a.btn.btn-light:hover svg path {
  fill: #2797fe;
}
header div.menu-right-side-menu-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
header div.menu-right-side-menu-container ul a {
  display: block;
  background-color: #2797fe;
  color: white;
  border-radius: 2px;
  font-weight: bold;
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  transition: background-color 250ms;
}
@media all and (max-width: 1299px) {
  header div.menu-right-side-menu-container ul a {
      font-size: 0.875rem;
  }
}
header div.menu-right-side-menu-container ul a:hover {
  text-decoration: none;
  background-color: #0e8bfe;
}
header div.search {
  border-top: 2px solid rgba(216, 216, 216, 0.18);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding-top: 20px;
  padding-bottom: 30px;
  box-shadow: 0 30px 20px rgba(62, 114, 126, 0.16);
  background-color: white;
}
header div.search > .container {
  max-width: 94%;
}
header div.search div.col {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0px;
  padding-right: 15px;
}
@media all and (min-width: 1450px) {
  header div.search div.col {
      padding-left: 7px;
      padding-right: 25px;
  }
}
header div.search div.col > form {
  width: inherit;
}
header div.search input.form-control {
  font-size: 38px;
  font-weight: 600;
  width: calc(100% - 40px);
  color: #393939;
  border: none;
  border-radius: 0;
  background-color: white;
}
header div.search input.form-control:active,
header div.search input.form-control:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
header div.search input.form-control::placeholder {
  color: #e4e4e4;
}
@media all and (max-width: 767px) {
  header div.search input.form-control {
      font-size: 24px;
  }
}
header div.search a.close-search svg polygon {
  transition: fill 250ms;
}
header div.search a.close-search:hover svg polygon {
  fill: #393939;
}
.pre-header {
  background-image: url(../images/footer-bg-v3.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 42px;
  padding: 7px 0px;
  color:white;
}

.pre-header ul li {
  display: inline;
  color:white;
}

.pre-header ul.info li {
  margin-right: 45px;
  color:white;
}

.pre-header ul.info li a {
 
  font-size: 14px;
  transition: all .3s;
  color:white;
}

.pre-header ul.info li a:hover {
  color: whitesmoke;
}

.pre-header ul.info li a i {
  font-size: 18px;
  margin-right: 8px;
}

.pre-header ul.social-media {
  text-align: right;
}

.pre-header ul.social-media li {
  margin-left: 5px;
}

.pre-header ul.social-media li a {
  background-color: #4da6e7;
  color: white;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
  transition: all .3s;
}

.pre-header ul.social-media li a:hover {
  background-color: white;
  color:#4da6e7;
}

.background-header {
  background-color: #fff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #fff;
}

.background-header .main-nav .nav li:hover a {
  color: #4da6e7;
}

.background-header .nav li a.active {
  position: relative;
  color: #fff;
}

.background-header .nav li a.active:after {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #4da6e7;
  content: '';
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
}

.background-header .nav li:last-child a.active:after {
  background-color: transparent;
}

.header-area {
  background-color: #fff;
  box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  float: left;
  -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;
}

.header-area .main-nav .logo {
    line-height: 100px;
    float: left;
    -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;
}

.background-header .main-nav .logo {
  line-height: 80px;
}

.background-header .main-nav .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -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;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
  font-size:1.2rem;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
  padding-left: 40px;
}

.header-area .main-nav .nav li:last-child a ,
.background-header .main-nav .nav li:last-child a {
  padding: 0px 20px !important;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover ,
.background-header .main-nav .nav li:last-child a:hover {
  color: #fff !important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 1.2rem;
  color: #2a2a2a;
  text-transform: capitalize;
  -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;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #4da6e7!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #4da6e7!important;
  opacity: 1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -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;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #4da6e7!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #2a2a2a;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #4da6e7;
}


@media (max-width: 1375px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
  .card-img { height:650px;}
  #index_banner h1 {
    font-size:2.4rem!important;}
  }

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
  .card-img { height:650px;}
  #index_banner h1 {
    font-size:1.8rem!important;}
  }


@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child  ,
  .background-header .main-nav .nav li:last-child {
    display: none;
  }
  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }
  .background-header .nav li a.active:after {
    display: none;
  }
  #index_banner h1 {
    font-size:1.8rem;
  }
}

@media (max-width: 767px) {
  .pre-header ul.info li:last-child {
    display: none;
  }
  .pre-header ul.info {
    margin-right: 45px;
    color:white;
    margin-top:-6%;
  }
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #4da6e7!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #fff;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
    box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .background-header .nav {
    margin-top: 80px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #4da6e7!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 1.2rem;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
  #index_banner h1 {
    font-size:1.8rem!important;
  }
  .banner-heading h1 {
    font-size:1.8rem!important;
  }
 
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #4da6e7;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #4da6e7;
    border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 10px 0px 30px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
 
  /*background-image: url(../images/slider-left-dec.jpg);*/
  background-repeat: no-repeat;
 
  left: 0;
  top: 60px;
  width: 262px;
  height: 625px;
  z-index: 1;
}

.main-banner:before {

  /*background-image: url(../images/slider-right-dec.jpg);*/
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 60px;
  width: 1159px;
  height: 797px;
  z-index: -1;
}

.main-banner .left-content {
  margin-right: 15px;
}

.main-banner .left-content h6 {
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 700;
  color: #4da6e7;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.main-banner .left-content h2 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 50px;
  color: #2a2a2a;
  margin-bottom: 20px;
}

.main-banner .left-content p {
  margin-bottom: 30px;
  margin-right: 45px;
}

.main-banner .right-image {
  text-align: right;
  position: relative;
  z-index: 20;
}

.main-banner .right-image img {
  max-width: 593px;
}



/* 
---------------------------------------------
About Style
--------------------------------------------- 
*/

#about {
  padding-top: 40px;
}

.about-left-image img {
  margin-right: 45px;
}

.about-right-content p {
  margin-top: 30px;
  margin-bottom: 45px;
}

.skills-content {
  position: relative;
  z-index: 1;
  margin-top: -50px;
  background-color: #f5f5f5;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 110px 0px 50px 0px;
}

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

.progress {
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}
.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #fd6a54;
}

.first-skill-item .progress .progress-bar {
  border-color: #4da6e7;
}

.second-skill-item .progress .progress-bar {
  border-color: #726ae3;
}

.third-skill-item .progress .progress-bar {
  border-color: #f58b56;
}

.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress .progress-value {
  text-align: center;
  color: #2a2a2a;
  display: flex;
  width: 100%;
  border-radius: 50%;
  font-size: 35px;
  text-align: center;
  line-height: 25px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
}
.progress .progress-value div {
  margin-top: 10px;
}
.progress .progress-value span {
  font-size: 18px;
  text-transform: none;
  color: #afafaf;
  font-weight: 300;
}

/* This for loop creates the  necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}
.progress {
  margin-bottom: 1em;
}

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.services {
  padding-top: 130px;
  position: relative;
}

.services:after {
  content: '';
  /*background-image: url(../images/slider-left-dec.jpg);*/
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 786px;
  height: 1217px;
  z-index: 0;
}

.services:before {
  content: '';
 /* background-image: url(../slider-right-dec.jpg);*/
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 400px;
  width: 161px;
  height: 413px;
  z-index: 0;
}

.services .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.services .section-heading .line-dec {
  margin: 0 auto;
}

.services .naccs {
  position: relative;
  z-index: 1;
}

.services .icon {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.services .naccs .menu div h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  width: 100%;
}

.services .icon img {
  margin-bottom: 10px;
  max-width: 60px;
  min-width: 60px;
}

.services .naccs .menu {
  text-align: center;
  margin-bottom: 30px;
}

.services .naccs .menu div {
  color: #2a2a2a;
  margin: 0px;
  width: 15%;
  font-size: 20px;
  font-weight: 700;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  position: relative;
  border-radius: 15px;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services .naccs .menu div .thumb {
  display: inline-block;
  width: 100%;
  padding: 30px 0px;
  background-color: #fff;
}

.services .naccs .menu div.active {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

.services ul.nacc {
  height: 100% !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services ul.nacc li.active {
  transition-delay: 0.3s;
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  background-color: #fff;
  border-radius: 15px;
  padding: 80px 120px 50px 120px;
}

.services ul.nacc li {
  width: 100%;
}

.services ul.nacc li .right-image img {
  max-width: 420px;
  float: right;
}

.services .nacc .thumb h4 {
  color: #2a2a2a;
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  margin-bottom: 25px;
}

.services .nacc .thumb .main-white-button {
  text-align: right;
  margin-top: 40px;
}

.services .nacc .thumb .main-white-button a {
  background-color: #8d99af;
  color: #fff;
}

.services .nacc .thumb .main-white-button a i {
  background-color: #fff;
  color: #8d99af;
}

.services .left-text h4 {
  font-size: 20px;
  font-weight: 700;
  color: #4da6e7 !important;
}

.services .left-text p {
  margin-bottom: 30px;
}

.nacc .ticks-list span {
  display: inline-block;
  opacity: 1;
  margin-right: 45px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 400;
}



/* 
---------------------------------------------
Free Quote
--------------------------------------------- 
*/

.free-quote {
  background-image: url(../images/quote-bg-v3.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 120px 0px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 130px;
}

.free-quote .section-heading {
  margin-bottom: 60px;
}

.free-quote .section-heading h6,
.free-quote .section-heading h4 {
  color: #fff;
}

.free-quote .section-heading .line-dec {
  margin: 0 auto;
  background-color: #fff;
}

.free-quote form {
  background-color: #fff;
  display: inline-block;
  width: 100%;
  min-height: 80px;
  border-radius: 40px;
  position: relative;
  z-index: 1;
}

.free-quote form input {
  width: 100%;
  margin-top: 20px;
  margin-left: 30px;
  color: #afafaf;
  font-weight: 400;
  font-size: 15px;
  height: 40px;
  background-color: transparent;
  border-bottom: 1px solid #eee;
  border-top: none;
  border-left: none;
  border-right: none;
  position: relative;
  z-index: 2;
  outline: none;
}

.free-quote form button {
  width: 100%;
  height: 80px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  outline: none;
  border: none;
  margin-left: 30px;
  background-color: #4da6e7;
  font-size: 15px;
  color: #fff;
}


/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/

.our-portfolio {
  padding-top: 130px;
  overflow: hidden;
  position: relative;
}

.our-portfolio:before {
  content: '';
  background-image: url(../images/portfolio-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 0px;
  width: 414px;
  height: 861px;
  z-index: 1;
}

.our-portfolio:after {
  content: '';
  background-image: url(../images/portfolio-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 677px;
  height: 759px;
  z-index: 1;
}

.our-portfolio .section-heading {
  margin-bottom: 80px;
}

.our-portfolio .container-fluid {
  padding-right: 0px;
  padding-left: 0px;
  position: relative;
  z-index: 2;
}

.our-portfolio .item {
  position: relative;
  z-index: 222;
}

.portfolio-item {
  border-radius: 25px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  margin: 15px;
}

.portfolio-item .thumb {
  position: relative;
  border-radius: 50px;
}

.portfolio-item:hover .down-content h4,
.portfolio-item:hover .down-content span {
  color: #4da6e7;
}

.portfolio-item .thumb img {
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
  overflow: hidden;
}

.portfolio-item .down-content {
  background-color: #fff;
  text-align: center;
  padding: 18px 0px;
  border-bottom-right-radius: 23px;
  border-bottom-left-radius: 23px;
}

.portfolio-item .down-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 8px;
  transition: all .3s;
}

.portfolio-item .down-content span {
  font-size: 15px;
  color: #afafaf;
  transition: all .3s;
}

.our-portfolio .owl-nav {
  display: inline-block!important;
  position: absolute;
  top: -125px;
  right: 15%;
  max-width: 1320px;
}

.our-portfolio .owl-nav .owl-next {
  margin-left: 10px;
}

.our-portfolio .owl-nav span {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  font-size: 30px;
  background-color: #eee;
  border-radius: 50%;
  color: #fff;
  transition: all 0.5s;
}

.our-portfolio .owl-nav span:hover {
  color: #fff;
  background-color: #4da6e7;
}


/* 
---------------------------------------------
Blog
--------------------------------------------- 
*/

.blog:before {
  content: '';
  /*background-image: url(../images/blog-left-dec.jpg);*/
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 961px;
  height: 1020px;
  z-index: 0;
}

.blog {
  position: relative;
  padding-top: 3%;
}

.blog .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.blog .section-heading .line-dec {
  margin: 0 auto;
}

.blog-post {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 25px;
  position: relative;
  z-index: 2;
}

.show-up {
  position: relative;
  z-index: 222;
}

.blog-post .thumb img {
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
}

.blog-post .down-content {
  border-bottom-right-radius: 23px;
  border-bottom-left-radius: 23px;
  background-color: #fff;
  padding: 30px;
}

.blog-post .down-content span.category {
  font-size: 15px;
  color: #fff;
  padding: 8px 12px;
  background-color: #4da6e7;
  border-radius: 18px;
  display: inline-block;
}

.blog-post .down-content span.date {
  font-size: 15px;
  color: #afafaf;
  text-align: right;
  float: right;
  margin-top: 4px;
}

.blog-post .down-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 30px;
}

.blog-post .down-content p {
  margin-bottom: 30px;
}

.blog-post .down-content span.author {
  font-size: 15px;
  color: #2a2a2a;
}

.blog-post .down-content span.author img {
  max-width: 56px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog-post .down-content .border-first-button {
  display: inline-block;
  float: right;
}

.blog-posts {
  margin-left: 30px;
}

.post-item {
  margin-bottom: 62px;
}

.last-post-item {
  margin-bottom: 0px;
}

.post-item .thumb {
  display: inline-block;
  float: left;
  margin-right: 30px;
}

.post-item .thumb img {
  border-radius: 23px;
  display: inline-block;
}

.post-item .right-content {
  padding-top: 20px;
}

.post-item .right-content span.category {
  font-size: 15px;
  color: #fff;
  padding: 8px 12px;
  background-color: #4da6e7;
  border-radius: 18px;
  display: inline-block;
}

.post-item .right-content span.date {
  font-size: 15px;
  color: #afafaf;
  text-align: right;
  float: right;
  margin-top: 4px;
}

.post-item .right-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 30px;
}


/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-us {
  padding-top: 130px;
}

.contact-us .section-heading .line-dec {
  margin: 0 auto;
}

.contact-us .section-heading {
  text-align: center;
  margin-bottom: 80px;
}


form#contact:before {
  background-image: url(../images/contact-top-right-v3.png);
  position: absolute;
  right: 0;
  top: 0;
  width: 726px;
  height: 78px;
  background-repeat: no-repeat;
  content: '';
  z-index: 1;
}

.contact-dec img {
  max-width: 224px;
  position: absolute;
  right: 25px;
  top: -242px;
}

form#contact:after {
  background-image: url(../images/contact-bottom-right-v3.png);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 532px;
  height: 106px;
  background-repeat: no-repeat;
  content: '';
  z-index: 1;
}

form#contact {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  position: relative;
  background-color: #fff;
  border-radius: 23px;
  text-align: center;
}

form#contact #map iframe {
  border-top-left-radius: 23px;
  border-bottom-left-radius: 23px;
  margin-bottom: -7px;
  position: relative;
  z-index: 2;
}

.fill-form {
  padding: 80px 60px 80px 30px;
}

.fill-form .info-post {
  margin-bottom: 20px;
}

.fill-form .icon {
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 23px;
  padding: 25px 15px;
}

.fill-form .icon img {
  max-width: 60px;
  display: block;
  margin: 0 auto;
}

.fill-form .icon a {
  margin-top: 15px;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #2a2a2a;
  transition: all .3s;
}

.fill-form .icon:hover a {
  color: #4da6e7;
}

form#contact input {
  width: 100%;
  height: 46px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  border-radius: 23px;
  margin-top: 30px;
}

form#contact input::placeholder {
  color: #aaa;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 200px;
  min-height: 200px;
  height: 200px;
  border-radius: 23px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-top: 30px;
}

form#contact textarea::placeholder {
  color: #aaa;
}

form#contact button {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #4da6e7;
  margin-top: 30px;
  width: 100%;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: 1px solid #4da6e7;
  transition: all .3s;
  outline: none;
}

form#contact button:hover {
  background-color: #4da6e7!important;
  color: #fff!important;
}

/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  background-image: url(../images/footer-bg-v3.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 130px;
}

footer p {
  text-align: center;
  margin: 20px 0px;
  color: #fff;
}

footer p a {
  color: #fff;
  transition: all .5s;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 25px;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }
}

@media (max-width: 992px) {
  form#contact {
    overflow: hidden;
  }
  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }
  .main-banner .left-content {
    margin-right: 0px;
  }
  .main-banner {
    text-align: center;
    /*padding: 226px 0px 30px 0px;*/
  }
  .main-banner:before {
    display: none;
  }
  .main-banner .right-image {
    margin: 30px auto 0px auto;
    text-align: center;
  }
  .features-item {
    margin-bottom: 45px;
  }
  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }
  .skill-item {
    margin-bottom: 30px;
  }
  .about-left-image img {
    margin-right: 0px;
    margin-bottom: 45px;;
  }
  .services .naccs .menu div {
    font-size: 15px;
    font-weight: 500;
  }
  .service-item {
    text-align: center;
  }
  .service-item .icon {
    margin-top: 0px;
    margin-bottom: 30px;
  }
  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 70px;
  }
  .our-portfolio .owl-nav {
    display: none !important;
  }
  .contact-info {
    margin-top: 60px;
  }
  form#contact {
    padding: 45px;
  }
  .card-img {
    min-height: 800px!important;
  }

}

@media (max-width: 767px) {
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }
  .main-banner .info-stat {
    margin-bottom: 15px;
  }
  .service-item {
    text-align: center;
    padding: 30px;
  }
  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .service-item .right-content {
    display: inline-block;
  }
  .services .naccs .menu div .thumb {
    padding: 5px;
  }
  .services .icon img {
    margin: 0px;
  }
  .services ul.nacc li.active {
    padding: 45px;
  }
  .services .naccs .menu div  {
    font-size: 0px;
  }
  .services ul.nacc li .right-image img {
    float: none;
  }
  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }
  .our-portfolio .section-heading .line-dec {
    margin: 0 auto;
  }
  .our-services .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }
  .free-quote form input {
    margin-left: 0px;
    padding: 0px 30px;
  }
  .free-quote form button {
    margin-left: 0px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 0px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 30px;
  }
  .post-item .thumb img {
    max-width: 140px;
  }
  .post-item .right-content p {
    display: none;
  }
  .about-us .about-item {
    margin-top: 15px;
  }
  form#contact {
    padding: 30px;
  }
  section.email img.yoga {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 50%;
}

section.email p.title {
    font-size: 25px;
    font-weight: 600;
    margin: 0 0 6px;
    text-align: center;
}

section.email p.sub-title {
    margin: 0 0 30px;
    text-align: center;
}

section.email form.form-inline {
    justify-content: center;
}

section.email form.form-inline > p {
    display: flex;
}

@media all and (max-width: 767px) {
    section.email form.form-inline > p {
        flex-direction:column;
        width: 100%;
    }
    .card-img {
      height: 885px!important;
    
    }
    #workrow {
      width:100%!important;
    }

    section.email form.form-inline > p br {
        display: none;
    }
}

section.email form.form-inline input.form-control {
    border-radius: 2px;
    border: none;
    font-size: 16px;
    margin: 0 17px 0 0;
    padding: .75rem 1.5rem;
    height: calc(1.5em + 1.5rem + 2px);
    max-width: 313px;
}

@media only screen and (min-width: 600px) {
    section.email form.form-inline input.form-control {
        width:100%;
    }
    .card-img {
      height: 885px!important;
    
    }
    
}

@media all and (max-width: 1061px) {
    section.email form.form-inline input.form-control {
        max-width:200px;
    }
    .card-img {
      height: 600px!important;
    
    }
    .button-body {
      display:none;
    }
}

@media all and (max-width: 767px) {
    section.email form.form-inline input.form-control {
        margin:0 0 .5rem;
        width: 100%;
        max-width: none;
    }
    .card-img {
      height: 850px!important;
    
    }
    .banner-body {
     display:none;
    }
    #index_banner h1{
      font-size:1.4rem!important;
      padding-bottom:2%;
    }
    .button-body {
      display:block;
    }
    
     
    
}

section.email form.form-inline input.form-control::placeholder {
    color: #999;
}

section.email form.form-inline .btn.btn-outline-light {
    padding: .75rem 1.5rem;
}

@media all and (max-width: 767px) {
    section.email form.form-inline .btn.btn-outline-light {
        width:100%;
    }
}

section.email form.form-inline span[role="alert"] {
    position: absolute;
    top: 100%;
    left: 0;
    padding: .25rem;
    color: white;
    font-size: .875rem;
}

section.email form.form-inline div.wpcf7-response-output {
    flex-basis: 100%;
    text-align: center;
    margin: 2rem 0 0;
    border: none;
}

}