@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

  :root {
      --primary: #f90000;
      --secondary: #1B458F;
      --gray: #9D9eB0;
      --hover: #BF202F;
  }

  html {
      scroll-behavior: smooth;
  }

  html,
  body {
      height: 100%;

  }

  body {
      line-height: 1.6;
      font-size: 15px;
      font-weight: 500;
      font-family: 'Public Sans', sans-serif;
      color: #424243;
      position: relative;
      background-color: #fff;
      overflow-x: hidden !important;
  }


  h1,
  h2,
  h3,
  h4,
  h5 {
      font-family: 'Public Sans', sans-serif;
      color: #242424;
      font-weight: 600;
  }

  a {
      text-decoration: none;
      -webkit-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
      -o-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  a:hover {
      color: var(--primary);
  }

  .btn {
      border-radius: 0;
  }

  .py-80 {
      padding-top: 80px;
      padding-bottom: 80px;
  }

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

  .fixed-bg {
      background-attachment: fixed !important;
      background-size: cover !important;
  }

  .bg-theme-color {
      background-color: var(--primary);
  }

  .text-theme-color {
      color: var(--primary) !important;
  }

  .primary-btn .btn {
      border: 1px solid var(--primary);
      background: var(--primary);
      color: #fff;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 14px;
      padding: 10px 20px;
      z-index: 1;
      position: relative;
  }

  .primary-btn .btn:hover,
  .primary-btn .btn:focus,
  .primary-btn .btn:active {
      -webkit-transition: all 0.8s ease 0.1s;
      -moz-transition: all 0.8s ease 0.1s;
      -o-transition: all 0.8s ease 0.1s;
      transition: all 0.8s ease 0.1s;
  }

  .primary-btn .btn:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0;
      background-color: #000;
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
      -webkit-transform: scale(0.2, 1);
      transform: scale(0.2, 1);
  }

  .primary-btn .btn:hover::before {
      opacity: 1;
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
  }

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

  .section-title .title {
      font-size: 34px;
      font-weight: 700;
      position: relative;
      text-transform: capitalize;
      color: #242424;
  }

  .section-title .title span {
      color: var(--primary);
  }

  .section-title h3:before {
      content: '';
      background: var(--primary);
      height: 9px;
      width: 4px;
      position: absolute;
      bottom: -19px;
      left: 10%;
      margin-left: -2px;
  }

  .section-title h3:after {
      content: '';
      background: var(--primary);
      height: 3px;
      width: 60px;
      position: absolute;
      bottom: -16px;
      left: 10%;
      margin-left: -30px;
  }

  .section-title h3 span {
      color: var(--primary);
  }

  .section-title .main-title {
      display: inline-block;
      position: relative;
      font-size: 38px;
      font-weight: 700;
      text-transform: uppercase;
      color: #242424;
  }

  .section-title .short-content {
      margin-top: 22px;
      font-size: 20px;
      color: #777;
      font-weight: 600;
  }

  .section-title .section-content p {
      font-size: 15px;
      text-align: justify;
  }


  /*=============================================
   - MAIN HEADER      
=============================================*/

  .main-header {
      position: absolute;
      z-index: 100;
      top: 0;
      left: 0;
      right: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .main-header .navbar {
      background: transparent;
      padding: 10px 0;
      border-bottom: 1px solid rgb(228 228 228 / 30%);
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075) !important;
  }

  .main-header .navbar:not(.fixed-top):hover {
      background: rgb(0 0 0 / 20%);
  }

  .main-header .navbar.fixed-top {
      background: #000;
      box-shadow: 0px 0px 2px rgba(33, 51, 102, 0.3);
      transition: all 0.3s ease;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: fadeInDown;
      animation-name: fadeInDown;
  }

  .main-header .navbar .navbar-nav .nav-link {
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 28px 22px;
      font-family: 'Public Sans', sans-serif;
  }

  .main-header .navbar .offcanvas.show .navbar-nav .nav-link {
      padding: 0.8rem 1rem;
      display: inline-block;
      color: #000;
  }

  .main-header .navbar .offcanvas.show .navbar-nav .nav-link:hover,
  .main-header .navbar .offcanvas.show .navbar-nav .nav-link:focus,
  .main-header .navbar .offcanvas.show .navbar-nav .nav-link.active {
      color: var(--primary);
  }

  .main-header .navbar.fixed-top .navbar-nav .nav-link {
      color: #fff;
  }

  .main-header .navbar .navbar-nav .nav-item:hover .nav-link,
  .main-header .navbar .navbar-nav .nav-item:focus .nav-link {
      color: var(--primary);
  }

  .main-header .navbar .navbar-nav .nav-link:hover,
  .main-header .navbar .navbar-nav .nav-link:focus,
  .main-header .navbar .navbar-nav .nav-link.active {
      color: var(--primary);
  }

  .main-header .header-search {
      /* box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%); */
      padding: 0px 16px;
      color: #114954;
  }


  .main-header .navbar-toggler:focus {
      box-shadow: none;
  }

  .main-header .navbar-toggler-icon {
      filter: invert(1);
      width: 2em;
      height: 2em;
  }

  .main-header .offcanvas-header .btn-close {
      opacity: 1;
      width: 2em;
      height: 2em;
  }

  /*---------------------------------------
    Banner section              
-----------------------------------------*/

  .banner-section {
      background: url(../images/home-bg.jpg) no-repeat bottom;
      background-size: cover;
      color: #ffffff;
      position: relative;
      text-align: center;
      min-height: 600px;
  }

  .banner-section h3 {
      color: #f0f0f0;
  }

  .banner-section .overlay {
      background: rgba(0, 0, 0, 0.3);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }

  .banner-section .banner-content {
      margin-top: 210px;
  }

  .banner-section .banner-content h1 {
      font-size: 54px;
      margin-top: 24px;
      font-weight: 700;
  }

  .banner-section .banner-content h3 {
      font-size: 30px;
  }

  .banner-section .banner-content p {
      line-height: 24px;
      max-width: 770px;
      margin: 20px auto;
  }

  .banner-section .banner-content .wrap {
      color: var(--primary);
  }

  /*---------------------------------------
    About section              
-----------------------------------------*/
  .about-section .about-img-box {
      position: relative;
      display: inline-block;
      margin-bottom: 30px;
      z-index: 1;
  }

  /*---------------------------------------
    service section              
-----------------------------------------*/
  .service-section {
      position: relative;
  }

  .service-section .section-title h3:before {
      content: '';
      background: var(--primary);
      height: 9px;
      width: 4px;
      position: absolute;
      bottom: -19px;
      left: 50%;
      margin-left: -2px;
  }

  .service-section .section-title h3:after {
      content: '';
      background: var(--primary);
      height: 2px;
      width: 60px;
      position: absolute;
      bottom: -16px;
      left: 50%;
      margin-left: -30px;
  }

  .service-box-wrap {
      position: relative;
      background: #fff;
      border-radius: 5px;
      padding: 30px 30px 50px;
      margin: 10px;
      max-height: 450px;
      -webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px;
      box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px;
      height: 100%;
  }

  .service-box-wrap:hover {
      -webkit-box-shadow: rgb(249 0 0) 0px 0px 5px 0px, rgb(249 0 0) 0px 0px 1px 0px;
      box-shadow: rgb(249 0 0) 0px 0px 5px 0px, rgb(249 0 0) 0px 0px 1px 0px;
      -webkit-transition: all 0.01s;
      transition: all 0.01s;
  }

  .service-box-wrap .p-image {
      text-align: center;
      margin-bottom: 20px;
  }

  .service-box-wrap .p-image img {
      -webkit-transform: scale(0.89);
      transform: scale(0.89);
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
  }

  .service-box-wrap:hover .p-image img {
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
  }

  .service-box-wrap .p-content .heading {
      font-weight: 700;
      line-height: 1.25;
      font-size: 22px;
      margin-bottom: 12px;
  }

  .service-box-wrap:hover .p-content .heading {
      color: var(--primary);
      -webkit-transition: .3s ease;
      transition: .3s ease;
  }

  .service-section .service-box-wrap .p-content p {
      font-size: 14px;
      color: #aaa;
      font-weight: 300;
  }

  .service-section .service-box-wrap .p-content ul {
      columns: 2;
      -webkit-columns: 2;
      -moz-columns: 2;
      margin: 0;
      padding: 0;
  }

  .service-section .service-box-wrap .p-content ul li {
      list-style: none;
      font-size: 22px;
  }

  .service-section .service-box-wrap .p-content ul li span {
      font-size: 14px;
  }

  .service-carousel.owl-carousel .owl-item ul li img {
      display: inline;
      width: 16px;
  }

  .service-carousel.owl-carousel .owl-stage {
      display: flex;
  }

  .service-carousel.owl-theme .owl-nav {
      position: relative;
      margin-top: 15px;
  }

  .service-carousel.owl-carousel .owl-nav button.owl-next,
  .service-carousel.owl-carousel .owl-nav button.owl-prev {
      position: relative;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      text-align: center;
      background: transparent;
      cursor: pointer;
      z-index: 1;
      transition: .5s;
      background-color: var(--primary);
      box-shadow: 0px 10px 80px rgb(0 0 0 / 20%);
      color: #fff;
      margin: 0 10px;
      font-size: 16px;
      line-height: 28px;
  }

  .service-carousel.owl-carousel .owl-nav button.owl-next:hover,
  .service-carousel.owl-carousel .owl-nav button.owl-prev:hover {
      background-color: #000;
      color: #fff;
  }

  /*---------------------------------------
    cta section              
-----------------------------------------*/

  .cta-section {
      position: relative;
  }

  .cta-section .overlay-dark:before {
      position: absolute;
      content: "";
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #000;
      z-index: -1;
      opacity: 0.5;
  }

  .cta-section .bg-image-center {
      position: relative;
      z-index: 1;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
  }

  .cta-section .short-title-wrap h5 {
      position: relative;
      font-size: 22px;
      font-weight: 700;
      padding-right: 45px;
      display: inline-block;
      margin-bottom: 35px;
  }

  .cta-section .short-title-wrap h5:before {
      content: '';
      background: var(--primary);
      height: 9px;
      width: 4px;
      position: absolute;
      bottom: -19px;
      left: 50%;
      margin-left: -2px;
  }

  .cta-section .short-title-wrap h5:after {
      content: '';
      background: var(--primary);
      height: 2px;
      width: 60px;
      position: absolute;
      bottom: -16px;
      left: 50%;
      margin-left: -30px;
  }

  /*---------------------------------------
    Our Services section              
-----------------------------------------*/
  .our-services-section {
      position: relative;
  }

  .our-services-section .service-img-box img {
      width: 100%;
  }

  .our-services-section .section-title h3:before {
      content: '';
      background: var(--primary);
      height: 9px;
      width: 4px;
      position: absolute;
      bottom: -19px;
      left: 50%;
      margin-left: -2px;
  }

  .our-services-section .section-title h3:after {
      content: '';
      background: var(--primary);
      height: 3px;
      width: 60px;
      position: absolute;
      bottom: -16px;
      left: 50%;
      margin-left: -30px;
  }

  /*---------------------------------------
    footer section              
-----------------------------------------*/
  .footer-section {
      background: #f9c200 url(../images/footer-bg.jpg) no-repeat center;
      background-size: cover;
      padding: 40px 0;
      text-align: center;
  }

  .footer-section h5 a:hover {
      color: var(--primary) !important;
  }


  @media (max-width: 767.98px) {
      .py-80 {
          padding-top: 40px;
          padding-bottom: 40px;
      }

      .section-title .main-title {
          font-size: 30px;
      }

      .section-title .short-content {
          margin-top: 20px;
          font-size: 16px;
      }

      .section-title .title {
          font-size: 25px;
      }

      .section-title .section-content p {
          font-size: 14px;
      }

      .main-header nav .primary-btn {
          display: none;
      }

      .cta-section .short-title-wrap h5 {
          font-size: 20px;
          padding-right: unset;
          margin-bottom: 25px;
      }
  }