/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/
  a {
      color: inherit;
      text-decoration: none;
  }

  .sub-header {
      background-color: #fff;
      padding: 10px 0px;
      border-bottom: 1px solid #eee;
  }

  .sub-header ul li {
      display: inline-block;
  }

  .sub-header ul.social-links {
      text-align: right;
  }

  .sub-header ul.social-links li {
      margin-left: 8px;
  }

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

  .sub-header ul.social-links li a:hover {
      background-color: black;
  }

  .sub-header ul.info li {
      font-size: 14px;
      color: #7a7a7a;
      border-right: 1px solid #eee;
      margin-right: 25px;
      padding-right: 25px;
  }

  .sub-header ul.info li:last-child {
      margin-right: 0px;
      padding-right: 0px;
      border-right: none;
  }

  .sub-header ul.info li i {
      font-size: 20px;
      color: black;
      margin-right: 8px;
  }

  .background-header {
      background-color: #f2f6fc;
      height: 80px !important;
      position: fixed !important;
      top: 0 !important;
      left: 0;
      right: 0;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15) !important;
      -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 {
      position: relative;
      background-color: #f2f6fc;
      height: 100px;
      z-index: 100;
      -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 {
      background: transparent;
      display: flex;
  }

  .header-area .main-nav .logo {
      -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;
      display: inline-block;
  }

  .header-area .main-nav .logo h1 {
      line-height: 100px;
      font-size: 28px;
      text-transform: uppercase;
      color: #1e1e1e;
      font-weight: 700;
      letter-spacing: 2px;
  }

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

  .header-area .main-nav ul.nav {
      flex-basis: 100%;
      margin-top: 30px;
      justify-content: right;
      -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:last-child {
      padding-right: 0px;
  }

  .header-area .main-nav .nav li {
      padding-left: 10px;
      padding-right: 10px;
      height: 100px;
      line-height: 100px;
  }

  .header-area .main-nav .nav li a {
      display: block;
      padding-left: 20px;
      padding-right: 20px;
      font-weight: 500;
      font-size: 15px;
      height: 40px;
      line-height: 40px;
      text-transform: capitalize;
      color: #1e1e1e;
      -webkit-transition: all 0.4s ease 0s;
      -moz-transition: all 0.4s ease 0s;
      -o-transition: all 0.4s ease 0s;
      transition: all 0.4s ease 0s;
      border: transparent;
      letter-spacing: .25px;
  }

  .header-area .main-nav .nav li:last-child a {
      background-color: #1e1e1e;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
      text-transform: none;
      border-radius: 20px;
      padding-left: 0px;
  }

  .header-area .main-nav .nav li:last-child a i {
      background-color: black;
      display: inline-block;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      margin-right: 10px;
      border-radius: 50%;
      margin-left: -1px;
  }

  .header-area .main-nav .nav li:last-child:hover a {
      background-color: #1e1e1e;
  }

  .header-area .main-nav .nav li:last-child:hover a i {
      color: #fff;
  }

  .header-area .main-nav .nav li:hover a {
      color: black;
  }

  .header-area .main-nav .nav li a.active {
      color: black;
  }


  .background-header .main-nav .nav li a.active {
      color: black;
  }

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

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

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

  .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: #1e1e1e;
      display: block;
      position: absolute;
      width: 30px;
      height: 2px;
      left: 0;
  }

  .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: #1e1e1e;
      display: block;
      position: absolute;
      width: 30px;
      height: 2px;
      left: 0;
      width: 75%;
  }

  .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: #1e1e1e;
  }

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

  .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: #1e1e1e;
  }

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

  .visible {
      display: inline !important;
  }

  @media (max-width: 1200px) {
      .header-area .main-nav .nav li {
          padding-left: 5px;
          padding-right: 5px;
      }

  }

  @media (max-width: 767px) {
      .background-header .main-nav {
          box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
          border-radius: 0px 0px 25px 25px;
          width: 100%;
      }

      .background-header .main-nav .nav,
      .header-area .main-nav .nav {
          background-color: #fff;
      }

      .background-header .main-nav .nav li a,
      .header-area .main-nav .nav li a {
          line-height: 50px;
          height: 50px;
          font-weight: 400;
          color: #1e1e1e;
          background-color: #fff;
          border-radius: 0px 0px 25px 25px;
      }

      .background-header .main-nav .nav li,
      .header-area .main-nav .nav li {
          border-top: 1px solid #ddd;
          background-color: #f1f0fe;
          height: 50px;
          border-radius: 0px 0px 25px 25px;
      }

      .header-area .main-nav .nav {
          height: auto;
          flex-basis: 100%;
      }

      .header-area .main-nav .logo {
          position: absolute;
          left: 30px;
          top: 0px;
      }

      .background-header .main-nav .logo {
          top: 0px;
      }

      .background-header .main-nav .border-button {
          top: 0px !important;
      }

      .header-area .main-nav .border-button {
          position: absolute;
          top: 15px;
          right: 70px;
      }

      .header-area.header-sticky .nav li a:hover,
      .header-area.header-sticky .nav li a.active {
          color: black !important;
          opacity: 1;
      }

      .header-area.header-sticky .nav li.search-icon a {
          width: 100%;
      }

      .header-area .nav li:last-child a {
          background-color: transparent !important;
          font-weight: 300 !important;
          text-transform: capitalize !important;
      }

      .header-area {
          padding: 0px 15px;
          height: 80px;
          box-shadow: none;
          text-align: center;
      }

      .header-area .container {
          padding: 0px;
      }

      .header-area .logo {
          margin-left: 0px;
      }

      .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;
      }

      .header-area .main-nav .nav li:first-child {
          border-top: 1px solid #eee;
      }

      .header-area.header-sticky .nav {
          margin-top: 80px !important;
      }

      .background-header.header-sticky .nav {
          margin-top: 80px !important;
      }

      .header-area .main-nav .nav li {
          width: 100%;
          background: #fff;
          padding-left: 0px !important;
          padding-right: 0px !important;
      }

  }



  /* 
---------------------------------------------
Page Header Style
--------------------------------------------- 
*/

  .page-heading {
      background-image: url(../images/page-heading-bg.jpg);
      background-position: center bottom;
      background-repeat: no-repeat;
      background-size: cover;
      padding: 110px 0px;
      text-align: center;
  }

  .page-heading span {
      background-color: #fff;
      color: #1e1e1e;
      font-size: 14px;
      font-weight: 500;
      text-transform: uppercase;
      padding: 10px 25px;
      display: inline-block;
      margin-bottom: 30px;
  }

  .page-heading span a {
      color: #1e1e1e;
  }

  .page-heading h3 {
      font-size: 48px;
      font-weight: 900;
      text-transform: uppercase;
      color: #fff;
  }



  .nav li a.active,
  .nav li a.active span {
      color: #6610f2 !important;
      /* Or any color of your choice */
      font-weight: bold;
  }


  .sub-header ul.info a,
  .sub-header ul.social-links a {
      margin-right: 20px;
      /* spacing between items */
      display: inline-block;
  }

  i {
      color: #6610f2 !important;
  }







  @media (max-width: 767px) {
      .sub-header {
          display: none;
      }
  }

  @media (max-width: 767px) {
      .header-area {
          display: none;
      }
  }

  .sub-header {
      height: 50px;
      /* or whatever your height is */
  }

  .header-area {
      position: sticky;
      top: 0;
      z-index: 999;
      background-color: #fff;
      /* Ensure background */
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      /* Optional for shadow effect */
  }

  .nav li a i,
  .sub-header i {
      margin-right: 8px;
      /* Adjust to your liking */
  }

  .header-area,
  .header-area.header-sticky,
  .background-header {
      background-color: white !important;
  }