/* =====================================================================
 *   helpers-placeholders.scss
 * =================================================================== */
/* BG Gradients */
/* Opacity Values */
/**
  * -------------------------------------------------------------------------------
  * ( 03 ) - Header
  * -------------------------------------------------------------------------------
  *
  *  This part contains logo, main menu and header bars.
  *
  * ------
  *
  *  Header is divided to the following sections:
  *
  *    |
  *    |-->  [ 01 ] - Logo
  *    |-->  [ 02 ] - Menu Main
  *    |-->  [ 03 ] - Header Bars
  *
  */
#header {
  position: relative;
  top: 0;
  left: 0;
  width: 100%; }
  .header-style-2 #header {
    background-color: #2c8ee8;
    background-image: -webkit-linear-gradient(90deg, #2c8ee8 0%, #429ef3 100%);
    background-image: -moz-linear-gradient(90deg, #2c8ee8 0%, #429ef3 100%);
    background-image: -o-linear-gradient(90deg, #2c8ee8 0%, #429ef3 100%);
    background-image: linear-gradient(90deg, #2c8ee8 0%, #429ef3 100%); }

/*  [ 01 ] - Logo
=================== */
.logo {
  display: inline-block; }
  .logo img {
    max-height: 100%; }
  .logo h3,
  .logo h3 + span {
    display: none; }
  .logo.text-white h3,
  .logo.text-white span {
    color: #fff; }
  .logo.logo-text img {
    display: none; }
  .logo.logo-text h3,
  .logo.logo-text h3 + span {
    display: block; }
  .logo.logo-text h3 {
    position: relative;
    margin-bottom: -1px;
    font-size: 20px;
    font-weight: 600;
    color: #fff; }
  .logo.logo-text h3 + span {
    font-size: 11px;
    color: #999; }

.logo-header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 50px;
  margin-left: 20px;
  transition: color 0.3s, top 0.3s; }
  @media (max-width: 480px) {
    .logo-header {
      height: 40px; } }
  .logo-header.logo-text {
    text-align: left; }

/*  [ 02 ] - Menu Main
======================== */
.menu-main {
  list-style: none;
  display: flex;
  position: relative;
  margin-right: auto;
  margin-left: 50px;
  height: 100%; }
  .menu-main li {
    position: relative;
    white-space: nowrap;
    /* no need for Supersubs plugin */ }
    .menu-main li a {
      transition: all 0.15s;
      font-family: "GothamRounded", "Almarai", sans-serif; }
  .menu-main > li {
    height: 100%; }
    .menu-main > li:hover a:not(.current) {
      opacity: 1; }
      .menu-main > li:hover a:not(.current) span::before {
        margin-top: 0; }
    .menu-main > li > a {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 20px 13px;
      font-size: 16px;
      font-family: "GothamRounded", "Almarai", sans-serif;
      text-transform: uppercase;
      font-weight: 500;
      transition: color 0.15s, height 0.3s, line-height 0.3s, opacity 0.3s;
      color: #212a42; }
      .menu-main > li > a::before {
        position: absolute;
        bottom: 0;
        width: calc(100% - 26px);
        height: 3px;
        background-color: transparent; }
      .menu-main > li > a:not(.current) span {
        overflow: hidden;
        height: 37px; }
        .menu-main > li > a:not(.current) span::before {
          content: attr(data-content);
          display: block;
          position: relative;
          top: 0px;
          margin-top: -38px;
          transition: all 0.25s;
          color: #5091fa; }
      .menu-main > li > a.current {
        opacity: 1; }
        .menu-main > li > a.current::before {
          background-color: #fff; }
        .menu-main > li > a.current span::after {
          content: "";
          position: absolute;
          left: 5px;
          top: 50%;
          display: inline-block;
          width: calc(100% - 10px);
          height: 1px;
          background-color: #5091fa; }
      .menu-main > li > a + ul.sub-menu {
        border-top: 5px solid #5091fa; }
        .menu-main > li > a + ul.sub-menu::before {
          content: "";
          position: absolute;
          top: -15px;
          left: 30px;
          border-bottom: 12px solid #5091fa;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent; }
          .header-style-2 .menu-main > li > a + ul.sub-menu::before {
            border-bottom-color: #ff991f; }
    .menu-main > li > a.current,
    .menu-main > li:hover > a,
    .menu-main > li > a:hover,
    .menu-main > li > a:focus {
      color: #5091fa; }
    .menu-main > li > a.current span,
    .menu-main > li:hover > a span,
    .menu-main > li > a:hover span,
    .menu-main > li > a:focus span {
      color: #5091fa; }
    .menu-main > li > a:not(.current) span {
      color: #192b3a; }
      .header-style-2 .menu-main > li > a:not(.current) span {
        color: #fff; }
  .menu-main ul {
    list-style: none; }
  .menu-main li:hover > ul.sub-menu,
  .menu-main li.sfHover > ul.sub-menu {
    display: block; }
  .menu-main ul.sub-menu,
  .menu-main ul.sub-menu li:last-child a {
    border-radius: 0 0 4px 4px; }
  .menu-main li a + ul.sub-menu {
    display: none;
    position: absolute;
    top: calc(100% - 0px);
    left: 0;
    z-index: 99;
    min-width: 17em;
    background-color: #fff;
    box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.2); }
  .menu-main ul.sub-menu li a {
    display: block;
    position: relative;
    color: #222;
    font-weight: 500;
    font-size: 16px;
    padding: 12px 10px 12px 0;
    border-bottom: 1px solid #eee; }
  .menu-main ul.sub-menu li:last-child a {
    border: none; }
  .menu-main ul.sub-menu li a:hover,
  .menu-main ul.sub-menu li a:focus,
  .menu-main ul.sub-menu li:hover > a {
    color: #5091fa;
    padding-right: 15px; }
  .menu-main ul.sub-menu > li {
    padding: 0 25px; }
    .menu-main ul.sub-menu > li:first-child {
      padding-top: 6px; }
    .menu-main ul.sub-menu > li:last-child {
      padding-bottom: 6px; }
  .menu-main .megamenu ul.sub-menu li a:hover {
    padding-left: 5px;
    background: transparent; }
  .menu-main ul.sub-menu ul {
    top: -6px !important;
    left: 100% !important;
    border-top: 5px solid #5091fa; }
    .header-style-2 .menu-main ul.sub-menu ul {
      border-top-color: #ff991f; }
  .menu-main > li > ul.sub-menu.reverse-pos {
    right: 0 !important;
    right: auto !important; }
  .menu-main ul.sub-menu ul.reverse-pos {
    right: 100% !important;
    left: auto !important; }
  .menu-main.sf-arrows a.sf-with-ul::after {
    font-family: "Font Awesome 5 Free";
    font-size: 15px;
    font-weight: 600;
    color: #192b3a;
    transition: all 0.2s; }
    .header-style-2 .menu-main.sf-arrows a.sf-with-ul::after {
      color: #fff; }
  .menu-main.sf-arrows > li > a.sf-with-ul::after {
    content: '\f0d7';
    position: relative;
    top: 0;
    margin-left: 8px; }
  .menu-main.sf-arrows > li > a.sf-with-ul:focus:after,
  .menu-main.sf-arrows > li:hover > a.sf-with-ul:after,
  .menu-main.sf-arrows > .sfHover > a.sf-with-ul:after {
    color: #5091fa !important; }
  .menu-main.sf-arrows ul.sub-menu a.sf-with-ul::after {
    position: absolute;
    content: '\f0d9';
    left: 10px;
    top: 16px;
    color: #192b3a; }
  .menu-main.sf-arrows li:hover > a.sf-with-ul:after,
  .menu-main.sf-arrows .sfHover > a.sf-with-ul:after {
    color: #5091fa; }

@media (max-width: 1200px) {
  .menu-main {
    display: none; } }

/* Btn Header */
/*  [ 03 ] - Header Bars
========================== */
/* Header Bar */
.header-bar,
.header-bar-wrap {
  background: transparent;
  transition: height 0.3s, background 0.3s; }

.header-bar-wrap {
  position: relative;
  left: 0;
  top: 0;
  width: 100%; }

.header-bar .container,
.header-bar .row,
.header-bar [class*="col-"] {
  height: 100%; }

.header-bar .col-md-12 {
  width: 100%; }

.header-bar .hb-content {
  display: flex;
  align-items: center;
  height: 100%;
  transition: all 0.2s; }
  .header-bar .hb-content [class*="position-"] {
    display: flex;
    height: 100%; }
  .header-bar .hb-content .position-right {
    margin-left: auto; }
  .header-bar .hb-content .position-left {
    margin-right: auto; }

/* Header Bar Sticky */
.header-bar.is-sticky .header-bar-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) !important;
  border-bottom-color: transparent; }

.header-bar .logo-header.logo-text {
  text-align: left; }
  .header-bar .logo-header.logo-text h3 + span {
    opacity: 1;
    color: #999; }

/* Header Bar 1 */
#header-bar-1 {
  background-color: #212a42;
  color: #ccc; }
  #header-bar-1,
  #header-bar-1 .header-bar-wrap {
    height: 60px; }
    @media (max-width: 768px) {
      #header-bar-1,
      #header-bar-1 .header-bar-wrap {
        padding: 10px 0;
        height: auto; } }
  @media (max-width: 768px) {
    #header-bar-1 .hb-content {
      flex-direction: column; }
      #header-bar-1 .hb-content [class*="position-"] {
        justify-content: center;
        width: 100%; }
      #header-bar-1 .hb-content .position-left {
        margin-bottom: 5px; } }
  #header-bar-1 .social-icons {
    margin-right: -10px; }

/* Header Bar 2 */
#header-bar-2 {
  position: relative;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
  #header-bar-2 .hb-content {
    margin-left: auto; }
  #header-bar-2,
  #header-bar-2 .header-bar-wrap {
    height: 110px; }
    .page-single #header-bar-2, .page-single
    #header-bar-2 .header-bar-wrap {
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.06); }
  #header-bar-2 .header-bar-wrap {
    z-index: 1;
    background-color: #fff; }
  #header-bar-2.is-sticky,
  #header-bar-2.is-sticky .header-bar-wrap {
    height: 90px; }
    @media (max-width: 480px) {
      #header-bar-2.is-sticky,
      #header-bar-2.is-sticky .header-bar-wrap {
        height: auto; } }
  #header-bar-2.is-sticky .header-bar-wrap {
    background-color: #fff; }
  @media (max-width: 480px) {
    #header-bar-2.is-sticky .hb-content {
      padding: 20px 0; } }
  #header-bar-2.text-white .header-bar-wrap {
    background-color: #222; }
  #header-bar-2.text-white .menu-main > li > a,
  #header-bar-2.text-white .menu-main > li > a:focus {
    color: #fff; }
  #header-bar-2.text-white .menu-main > li > a.current,
  #header-bar-2.text-white .menu-main > li:hover > a,
  #header-bar-2.text-white .menu-main > li > a:hover {
    color: #5091fa; }

/* List Info */
.list-info {
  list-style: none;
  position: relative;
  display: flex;
  align-items: center; }
  .list-info + .list-info {
    margin-right: 40px; }
  .list-info > li {
    display: flex;
    align-items: center; }
    .list-info > li + li {
      margin-left: 20px;
      padding-left: 20px;
      border-left: 1px solid rgba(255, 255, 255, 0.15); }
    .list-info > li > a {
      display: flex;
      align-items: center;
      color: #ccc; }
      .list-info > li > a:hover,
      .list-info > li > a:hover i {
        color: #fff; }
  .list-info i {
    margin-left: 7px;
    font-size: 13px;
    color: #222; }
    .list-info i::before {
      transition: all 0.2s; }

/* Side Panel Menu */
.side-panel-menu {
  overflow-x: auto;
  position: fixed;
  z-index: 120;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 60px 30px;
  width: 350px;
  height: 100%;
  top: 0;
  left: 0;
  transform: translateX(calc(-100% - 10px));
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.15);
  background-color: #212a42;
  transition: all 0.3s; }
  .side-panel-menu.viewed {
    transform: translateX(0); }
  .side-panel-menu .logo-side-panel {
    height: 60px; }
  .side-panel-menu .popup-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(34, 34, 34, 0.7);
    transition: all 0.4s; }
  .side-panel-menu .mobile-side-panel-menu {
    position: relative;
    z-index: 30;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px 0;
    margin: auto 0;
    width: 100%; }
    .side-panel-menu .mobile-side-panel-menu h5 {
      padding: 30px;
      margin-bottom: 0;
      height: 85px;
      background-color: var(--theme-color-1);
      color: #fff; }
  .side-panel-menu .side-panel-close {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    cursor: pointer;
    border-radius: 999px;
    transition: all 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-clip: content-box;
    background-color: rgba(255, 255, 255, 0.1); }
    .side-panel-menu .side-panel-close:hover {
      border-color: rgba(255, 255, 255, 0.3);
      background-color: transparent; }
    .side-panel-menu .side-panel-close .hamburger {
      display: block;
      padding: 0;
      opacity: 0.5; }
      .side-panel-menu .side-panel-close .hamburger .hamburger-box {
        display: block;
        width: 15px; }
      .side-panel-menu .side-panel-close .hamburger-inner, .side-panel-menu .side-panel-close .hamburger-inner::before, .side-panel-menu .side-panel-close .hamburger-inner::after {
        width: 15px;
        height: 2px;
        background-color: #fff; }

@media (max-width: 480px) {
  .side-panel-menu .mobile-side-panel-menu {
    width: 280px; } }

.popup-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  background: #222;
  transition: all 0.3s; }
  .popup-preview-overlay.viewed {
    opacity: 0.8;
    visibility: visible; }

@media (min-width: 1200px) {
  .side-panel-menu,
  .popup-preview-overlay {
    display: none; } }

/* Menu Mobile */
#menu-mobile {
  list-style: none;
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  clear: both;
  padding: 20px 0 50px;
  margin-top: 30px;
  width: 100%; }
  #menu-mobile ul {
    list-style: none; }
  #menu-mobile .ss-content {
    padding: 0 5px 0 0; }
  #menu-mobile .ss-scroll {
    opacity: 0.5;
    width: 6px; }
  #menu-mobile.ss-container:hover .ss-scroll {
    opacity: 1; }

.menu-mobile {
  /* 2nd Level Menus */ }
  .menu-mobile li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    position: relative; }
    .menu-mobile li:last-child {
      border-bottom: none; }
    .menu-mobile li a {
      display: block;
      position: relative;
      font-size: 16px;
      font-weight: 500;
      opacity: 0.7;
      padding: 15px 30px 15px 0;
      font-family: "GothamRounded", "Almarai", sans-serif;
      color: #fff; }
  .menu-mobile > li > a:hover,
  .menu-mobile > li > a.active {
    opacity: 1; }
  .menu-mobile > li > a.current {
    opacity: 1; }
  .menu-mobile ul {
    display: none;
    margin-top: 0 !important;
    padding-top: 20px;
    padding-left: 15px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15); }
    .menu-mobile ul a {
      color: #fff;
      font-weight: 600;
      font-size: 16px;
      padding: 15px 30px 15px 0; }
      .menu-mobile ul a:hover, .menu-mobile ul a.active {
        font-weight: 600;
        color: #5091fa; }
    .menu-mobile ul li:hover > ul {
      /*display: block;*/ }
  .menu-mobile li.has-ul > a::after {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    color: #fff;
    transition: all 0.2s; }
  .menu-mobile > li.has-ul > a::after {
    /*display: none;*/
    content: '\f0d8';
    font-size: 17px;
    font-weight: 600;
    right: 10px;
    top: 16px;
    transform: rotate(90deg); }
  .menu-mobile > li.has-ul > a.active::after,
  .menu-mobile > li.has-ul:hover > a::after {
    color: #fff; }
  .menu-mobile > li.has-ul > a.active::after {
    transform: rotate(180deg); }
  .menu-mobile ul.sub-menu li.has-ul > a::after {
    content: '\f0d9';
    font-size: 15px;
    top: 15px;
    left: 10px; }
  .menu-mobile ul.sub-menu li.has-ul > a.active::after,
  .menu-mobile ul.sub-menu li.has-ul:hover > a::after {
    color: #5091fa; }
  .menu-mobile ul.sub-menu li.has-ul > a.active::after {
    transform: rotate(-90deg); }

/* Mobile Menu Button */
.menu-mobile-btn {
  display: none;
  position: relative;
  margin-left: auto;
  padding: 12px;
  border-radius: 5px;
  transition: top 0.3s;
  background-color: #5091fa;
  background-image: -webkit-linear-gradient(90deg, #5091fa 0%, #5091fa 100%);
  background-image: -moz-linear-gradient(90deg, #5091fa 0%, #5091fa 100%);
  background-image: -o-linear-gradient(90deg, #5091fa 0%, #5091fa 100%);
  background-image: linear-gradient(90deg, #5091fa 0%, #5091fa 100%); }
  .header-style-2 .menu-mobile-btn {
    background-color: #212a42;
    background-image: -webkit-linear-gradient(90deg, #212a42 0%, #5091fa 100%);
    background-image: -moz-linear-gradient(90deg, #212a42 0%, #5091fa 100%);
    background-image: -o-linear-gradient(90deg, #212a42 0%, #5091fa 100%);
    background-image: linear-gradient(90deg, #212a42 0%, #5091fa 100%); }
  .menu-mobile-btn .hamburger-box {
    display: block;
    width: 25px; }
  .menu-mobile-btn .hamburger {
    padding: 0; }
    .menu-mobile-btn .hamburger-inner, .menu-mobile-btn .hamburger-inner::before, .menu-mobile-btn .hamburger-inner::after {
      width: 25px;
      height: 2px;
      background-color: #fff; }

@media (max-width: 1200px) {
  .menu-mobile-btn {
    display: flex;
    align-items: center; } }

@media (max-width: 480px) {
  #header-bar-2,
  #header-bar-2 .header-bar-wrap {
    height: auto; }
  #header-bar-2 .hb-content {
    padding: 25px 0; }
  #header-bar-2 .logo-header {
    margin: 0; } }

/* =====================================================================
 *   helpers-placeholders.scss
 * =================================================================== */
/* BG Gradients */
/* Opacity Values */

/*# sourceMappingURL=sourcemaps/header.css.map */