body,
    html {
      min-height: 100%;
      position: relative;
    }

    body {
      font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 16px;
      color: #666666;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      line-height: 1.53846154;
    }
/*Duplicate*/
    .yellowbg {
      background-color: #fbb034;
      background: linear-gradient(to right, #fbb034 40%, #F5D020 60%);
    }
    .text-white {
      color:#ffffff;
    }
/*Duplicate*/
    /* Header */
    .navbar {
      border-radius: 0;
      border: 0;
      margin: 0;
      z-index: 10;
    }

    .header-inner {
      width: 100%;
      position: reltive;
      z-index: 999;
      background-color: #000080;
      -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.06);
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.06);
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-transition: a;
      /* For Safari 3.1 to 6.0 */
      transition: all 2s;
    }

    .top-line {
      padding: 5px 0;
      background: #C5CBD5;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      overflow: hidden;
    }

    .top-line p,
    .top-line a {
      color: #000080;
      margin: 0;
      font-size: 14px;
    }

    .top-line p span {
      margin-right: 20px;
    }

    .top-line p span i {
      font-size: 13px;
      color: #000080;
      margin-right: 10px;
    }

    .top-line ul.social-icons {
      margin: 0;
      padding: 0;
      text-align: right;
    }

    .top-line ul.social-icons li {
      display: inline-block;
      margin-left: 9px;
    }

    .top-line ul.social-icons li a {
      display: inline-block;
      text-decoration: none;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      font-size: 14px;
      color: #ffffff;
    }

    .top-line ul.social-icons li a:hover {
      color: #ffba00;
    }

    header.active .top-line {
      height: 0;
      padding: 0;
    }

    /*** Brand logo ***/
    .brand-logo {
      padding:15px;
    }
    .brand {
      width: 200px;
      height: 90px;
    }

    .brand a {
      display: block
    }

    .brand,
    .header-inner .main-nav {
      display: table-cell;
      vertical-align: middle;
    }

    /*** Main Nav Menu ***/
    .main-nav {
      text-align: right;
      white-space: nowrap;
      padding: 0 0 0 30px;
      width: 100%;
    }

    .sf-menu,
    .sf-menu * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .main-nav .sf-menu li {
      position: relative;
    }

    .main-nav .sf-menu li:hover,
    .sf-menu li.sfHover {
      -webkit-transition: none;
      transition: none;
    }

    .main-nav .sf-menu li a {
         color: #fff;
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 90px;
    padding: 0 15px;
    position: relative;
    text-decoration: none;
    }

    .main-nav .sf-menu li.current a {
      color: #fff;
    }

    .main-nav .sf-menu li.current ul a {
      color: #fff;
    }

    .main-nav .sf-menu li ul li.current a {
      color: #424E75;
    }

    .main-nav .sf-menu ul {
      background-color: #fff;
      position: absolute;
      z-index: 6000;
      display: none;
      min-width: 12em;
      /* allow long menu items to determine submenu width */
      width: 12em;
      /* no auto sub width for IE7, see white-space comment below */
      top: 99%;
      left: 0;
      z-index: 99;
      margin: 1px 0;
      padding: 0;
      border-top: solid 2px #c44741;
      background-color: #fff;
      -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    }

    .main-nav .sf-menu>li {
      display: inline-block;
    }

    .main-nav .sf-menu li:hover>ul,
    .main-nav .sf-menu li.sfHover>ul {
      display: block;
    }

    .main-nav .sf-menu a {
      display: block;
      position: relative;
    }
    .main-nav .sf-menu a>span {
      padding: 5px 15px;
      border-radius: 25px;
      color:#707070
  }
    

    .main-nav .sf-menu a:hover {
      color: #fbb034;
    }

    .main-nav .sf-menu ul li {
      width: 180px;
      background: #fff;
      text-align: left;
      border-left: solid 1px #ddd;
      border-right: solid 1px #ddd;
      border-bottom: solid 1px #ddd;
    }

    .main-nav .sf-menu ul li a {
      padding: 10px 15px;
      font-size: 13px;
    }

    .main-nav .sf-menu ul ul {
      top: 0;
      left: 100%;
    }

    .main-nav .sf-menu ul ul li {
      background: #fff;
      border-left: solid 1px #eee;
    }

    /*** arrows (for all except IE7) **/
    .sf-arrows .sf-with-ul {
      padding-right: 2.5em;
      *padding-right: 1em;
      /* no CSS arrows for IE7 (lack pseudo-elements) */
    }

    .sf-arrows>li>.sf-with-ul:focus:after,
    .sf-arrows>li:hover>.sf-with-ul:after,
    .sf-arrows>.sfHover>.sf-with-ul:after {
      border-top-color: white;
      /* IE8 fallback colour */
    }

    .sf-arrows ul li>.sf-with-ul:focus:after,
    .sf-arrows ul li:hover>.sf-with-ul:after,
    .sf-arrows ul .sfHover>.sf-with-ul:after {
      border-left-color: #999;
    }

    .header-inner #toggle-btn {
      cursor: pointer;
      font-size: 17px;
      height: 45px;
      line-height: 45px;
      position: absolute;
      right: 15px;
      text-align: center;
      top: 20px;
      width: 45px;
      color: #ffffff;
    }

    .header-inner .toggle-subarrow {
      display: none;
    }
    .m-0 {
      margin: 0 !important;
    }
    .p-0 {
      padding: 0 !important;
    }
    .f-s-12 {
      font-size: 12px !important;
    }
    .f-s-14 {
      font-size: 14px !important;
    }
    .f-s-16 {
      font-size: 16px !important;
    }
    .f-s-18 {
      font-size: 18px !important;
    }
    .f-s-22 {
      font-size: 22px !important;
    }
    .f-w-300 {
      font-weight: 300 !important;
    }
    .f-w-600 {
      font-weight: 600 !important;
    }
    .theme-blue {
      color: #000080;
    }
    .theme-yellow {
      color: #E5BA23;
    }
    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
      font-family: 'Montserrat', sans-serif;
      line-height: 1.4;
    }
    .dark-text {
      color: #333333;
      line-height: 1.8;
    }
    .row.v-center {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display:         flex;
      flex-wrap: wrap;
    }
    .row.v-center > [class*='col-'] {
      display: flex;
      flex-direction: column;
    }
    .go-section {
      padding:30px 0;
    }
    .banner-section {
      background-color: #E5BA23;
      min-height: calc(100vh - 135px);
    }
    .banner-img img {
      width: 450px;
    margin: 10% auto;
    display: block;
    }
    .banner-content h2 {
      color: #000080;
      font-size: 40px;
    }
    .banner-content p {
      color: #333;
      font-size: 22px;
    }
    .primary-btn {
      background-color: #292974;
      color:#E5BA23;
      font-size: 18px;
      height: 46px;
      text-transform: uppercase;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
    }
    .primary-btn:hover,
    .primary-btn:active,
    .primary-btn:focus{
      background-color: #1d1d82;
      color: #E5BA23;
      border: 1px solid #1d1d82;
    }
    .secondary-btn {
      background-color: #E5BA23;
      color:#292974;
      font-size: 18px;
      height: 46px;
      text-transform: uppercase;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
    }
    .secondary-btn:hover,
    .secondary-btn:active,
    .secondary-btn:focus{
      background-color: #E5BA23;
      color: #292974;
      border: 1px solid #E5BA23;
    }
    .section-2 {
      background: url(../images/section-2-bg.svg)  50% 100px no-repeat fixed;
  background-size: cover;
  min-height:550px
    }
   .section-tech {
     background-color: #E5BA23;
   }
   .section-tech .content-section {
     margin-top:6rem;
   }
   .section-tech .content-section h3 {
     font-size: 32px;
   }
   .section-booking {
     background-color: #292974;
   }
   .section-booking .img-section img {
      padding: 30px;
      margin-top: 20%;
   }


   /* Testimonial */
   .testimonials {
     background-color: #E5BA23;
   }
   .shadow-effect {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    text-align: center;
border:1px solid #ECECEC;
    box-shadow: 0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.02);
}
#customers-testimonials .shadow-effect p {
    font-family: inherit;
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 17px 0;
    font-weight: 300;
}
.testimonial-name {
  width: auto;
  background: #292974;
  padding: 9px 35px;
  border-radius: 0 0 5px 5px;
  text-align: center;
    color: #fff;
    box-shadow: 0 9px 18px rgba(0,0,0,0.12), 0 5px 7px rgba(0,0,0,0.05);
}
#customers-testimonials .item {
    text-align: center;
    padding: 50px;
    margin-bottom:80px;
    opacity: .2;
    transform: scale3d(0.8, 0.8, 1);
    transition: all 0.3s ease-in-out;
}
#customers-testimonials .owl-item.active.center .item {
    opacity: 1;
    transform: scale3d(1.0, 1.0, 1);
}
.owl-carousel .owl-item img {
    transform-style: preserve-3d;
    max-width: 160px;
    margin: 0 auto;
}
#customers-testimonials.owl-carousel .owl-dots .owl-dot.active span,
#customers-testimonials.owl-carousel .owl-dots .owl-dot:hover span,
#clients.owl-carousel .owl-dots .owl-dot.active span,
#clients.owl-carousel .owl-dots .owl-dot:hover span
 {
    background: #292974;
    transform: translate3d(0px, -50%, 0px) scale(0.7);
}
#customers-testimonials.owl-carousel .owl-dots,
#clients.owl-carousel .owl-dots{
display: inline-block;
width: 100%;
text-align: center;
}
#customers-testimonials.owl-carousel .owl-dots .owl-dot,
#clients.owl-carousel .owl-dots .owl-dot{
display: inline-block;
}
#customers-testimonials.owl-carousel .owl-dots .owl-dot span ,
#clients.owl-carousel .owl-dots .owl-dot span {
    background: #292974;
    display: inline-block;
    height: 20px;
    margin: 0 2px 5px;
    transform: translate3d(0px, -50%, 0px) scale(0.3);
    transform-origin: 50% 50% 0;
    transition: all 250ms ease-out 0s;
    width: 20px;
}
/* Testimonial end */


/*Clients*/
.clients {
  background: #DFDFDF;
}
    #clients .item-details {
      background-color: #333333;
      color: #fff;
      padding: 20px 10px;
      text-align: left;
    }
    #clients .item-details h5 {
      margin: 0 0 15px;
      font-size: 18px;
      line-height: 18px;
    }
    #clients .item-details h5 span {
      color: red;
      float: right;
      padding-right: 20px;
    }
    #clients .item-details p {
      font-size: 14px;
    }
    #clients .item {
      text-align: center;
      margin-bottom: 30px;
    }

  #clients .item img{
     width:140px;
    }
    
    #clients .owl-nav [class*=owl-] {
      transition: all 0.3s ease;
    }

    #clients .owl-nav [class*=owl-].disabled:hover {
      background-color: #D6D6D6;
    }

    #clients {
      position: relative;
    }

    #clients .owl-next,
    #clients .owl-prev {
      width: 50px;
      height: 50px;
      line-height: 42px;
      border-radius: 50%;
      position: absolute;
      top: 15%;
      font-size: 32px;
      background: #292974;
      color: #e5ba23;
      border: 1px solid #ddd;
      text-align: center;
    }

    #clients .owl-prev {
      left: -50px;
    }

    #clients .owl-next {
      right: -50px;
    }
    #clients .shadow-effect {
      width: 180px;
      height: 180px;
      justify-content: center;
      align-items: center;
      display: flex;
      margin: 0 auto;
    }
    .mobile-only {
      display: none !important;
    }
/*Clients End*/

/* About page */
.about-section, .water-section {
  height:450px;
}
.about-banner {
  background: url(../images/gowatr-about.png);
  background-size: cover;
  min-height: 450px;
  position: absolute;
  width: 100%;
  top: 70px;
}
.water-banner {
  background: url(../images/gowatr-water-management.png);
  background-size: cover;
  min-height: 450px;
  /* position: absolute; */
  width: 100%;
  top: 70px;
}
.banner-header {
  position: absolute;
  left: 15%;
  top: 23%;
}
.custom-list li {
  margin-bottom: 20px;
}
.custom-list li span>img {
  width: 24px;
}

    @media (min-width: 768px) {
      .header-inner #toggle-btn {
        display: none;
      }
    }

    @media (max-width: 768px) {
      .navbar-brand {
        display: block;
      }
      .sf-menu {
        position: absolute;
        width: 100%;
      }
      .mobile-only {
        display: block !important;
      }
      .navbar {
        max-height: none;
      }
      .top-line {
        display: none;
      }
      .main-nav {
        margin-top: 10px;
        height: auto;
      }
      .about-banner {
        min-height: 200px;
        position: absolute;
      }
      .about-section {
        height: 220px;
    }
    .about-section, .water-section {
      height: 220px;
  }
    .water-banner {
      min-height: 200px;
    }
    .water-banner .banner-header {
      position: absolute;
      left: 3%;
      top: 6%;
  }
      .sf-menu>li {
        float: none;
      }

      .sf-menu li a {
        padding: 10px 13px;
        font-weight: 400;
      }

      .sf-menu li a:hover,
      .sf-menu li.sfHover a:hover {
        color: #c44741;
      }

      .sf-menu ul {
        font-size: 14px;
        display: block;
        position: static !important;
        border: 0;
        box-shadow: 0 0 0 0;
        -moz-box-shadow: 0 0 0 0;
        -webkit-box-shadow: 0 0 0 0;
      }
    }

    @media only screen and (max-width: 768px) {
      .header-inner .main-nav {
        display: block;
        margin: 0;
      }
      .brand-logo {
        padding:0;
        width: 130px;
      }

      #toggle-btn {
        display: block;
      }
      
      .toggle-subarrow {
        display: block !important;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        width: 45px;
        height: 42px;
        border-left: 1px solid #e8e8e8;
        text-align: center;
        color: #777;
      }

      .toggle-subarrow .fa {
        margin-top: 14px;
      }

      .main-nav {
        text-align: left;
        white-space: nowrap;
        padding: 0;
      }

      .sf-menu {
        display: none;
      }

      .main-nav .sf-menu {
        margin: 0 -15px;
      }

      .main-nav .sf-menu>li {
        font-size: 13px;
        line-height: 16px;
        display: block;
        border-top: 1px solid #0b0b80;
      }

      .main-nav .sf-menu li a {
        color: #fff;
        padding: 20px;
        line-height: 0px;
        display: block;
        position: relative;
        background-color: #000080;
        text-align: center
      }

      .main-nav .sf-menu ul {
        border: none;
      }

      .main-nav .sf-menu ul li {
        width: 100%;
        margin-left: 30px;
        font-size: 13px;
        line-height: 16px;
        font-weight: 400;
        position: relative;
        border: none;
        border-top: 1px solid #e8e8e8;
      }

      .sf-menu ul {
        position: static !important;
        display: none !important;
      }

      .mob-drop ul {
        display: block !important;
      }

    }
      @media(min-width: 601px) and (max-width: 780px) {
        .top-line .container {
          max-width: 70%;
        }

        .top-line p span {
          display: table;
          margin-right: 20px;
          text-align: left;
        }
      }