/*----------------------------------------------
    # Nav bar 
----------------------------------------------*/

.navbar.navbar-area.white .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.50)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar.navbar-area .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.50)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.mobile-logo{
  display: none;
}
@media only screen and (max-width:991px){
  .mobile-logo{
      display: block;
  }
  .desktop-logo{
      display: none !important;
  }
}
.navbar-area{
  padding: 0;
  &.nav-absolute{
      position: absolute;
      left: 0;
      width: 100%;
      top:0px;
      z-index: 2;
  }
  &.nav-style-02{
      background-color: transparent;
      .nav-container{
          background-color: transparent;
          box-shadow: none;
          border-radius: 0;
          .nav-right-content{
              ul{
                  li{
                      color: var(--paragraph-color);
                      cursor: pointer;
                      +li{
                          margin-left: 30px;
                      }
                      a{
                          color: var(--paragraph-color);
                      }
                      span {
                          font-size: 16px;
                          text-transform: capitalize;
                      }
                  }
              }
              .template-small-button {
                  color: var(--secondary-color);
                  background-color:var(--active-color);
                  border: 1px solid transparent;
              }
          }
          .navbar-collapse{
              .navbar-nav{
                  text-align: right;
                  li{
                      &.current-menu-item{
                          a{
                              color: var(--paragraph-color);
                          }
                         &:before{
                              color: var(--paragraph-color);
                          }
                      }
                      &.menu-item-has-children{
                          z-index: initial;
                          &:before{
                              opacity: 0;
                          }
                          .sub-menu{
                              li{
                                  +li{
                                      border-top: 1px solid #e2e2e2;
                                  }
                                  a{
                                      background-color: #fff;
                                      color: var(--paragraph-color);
                                      &:hover{
                                          background-color: var(--main-color);
                                          color: #fff;
                                      }
                                  }
                              }
                              .menu-item-has-children{
                                  &:hover > .sub-menu{
                                      li{
                                          &:hover{
                                              &:before{
                                                color: var(--secondary-color);
                                              }
                                          }
                                          a{
                                              
                                          }
                                      }
                                  }
                              }
                          }
                      }
                      a{
                          @include transition($transition);
                          color: var(--paragraph-color);
                      }
                      &:hover{
                          &.menu-item-has-children{
                              &:before{
                                color:var(--active-color);
                              }
                          }
                         a{
                          color: var(--secondary-color);
                         }
                      }
                  }
              }
          }
      }
  }
  &.nav-style-01{
      background-color: var(--secondary-color);
      .nav-container{
          background-color: var(--secondary-color);
          box-shadow: none;
          border-radius: 0;
          padding: 0 15px;
          .nav-right-content{
              ul{
                  li{
                    color: var(--secondary-color);
                      a{
                        color: var(--secondary-color);
                      }
                  }
              }
          }
          .navbar-collapse{
              .navbar-nav{
                  text-align: left;
                  li{
                      &.current-menu-item{
                          a{
                              color: var(--main-color);
                          }
                          &.menu-item-has-children{
                              &:before{
                                  color: var(--main-color);
                              }
                          }
                      }
                      &.menu-item-has-children{
                          z-index: initial;
                          &:before{
                            color: var(--secondary-color);
                          }
                          .sub-menu{
                              li{
                                  +li{
                                      border-top: 1px solid #e2e2e2;
                                  }
                                  a{
                                      background-color: #fff;
                                      color: var(--paragraph-color);
                                      &:hover{
                                          background-color: var(--main-color);
                                          color: #fff;
                                      }
                                  }
                              }
                              .menu-item-has-children{
                                  &:hover > .sub-menu{
                                      li{
                                          &:hover{
                                              &:before{
                                                color: var(--secondary-color);
                                              }
                                          }
                                          a{
                                              
                                          }
                                      }
                                  }
                              }
                          }
                      }
                      a{
                          @include transition($transition);
                          color: var(--secondary-color);
                      }
                      &:hover{
                          &.menu-item-has-children{
                              &:before{
                                  color: var(--main-color);
                              }
                          }
                         a{
                              color: var(--main-color);
                         }
                      }
                  }
              }
          }
      }
  }
  .nav-container{
      background-color: #fff;
      box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.2);
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      .nav-right-content{
          ul{
              margin: 0;
              padding: 0;
              list-style: none;
              margin-left: 15px;
              li{
                  display: inline-block;
                  margin: 0 10px;
                  &:last-child{
                      margin-right: 0;
                  }
                  color: #6a7795;
                  a{
                      color: #6a7795;
                      @include transition($transition);
                     &:hover{
                          color: var(--main-color);
                      }
                  }
                  &.search{
                     cursor: pointer;
                     @include transition($transition);
                     &:hover{
                          color:var(--main-color);
                      }
                  }
                  &.nav-btn{
                      .btn-boxed{
                          font-weight: 600;
                          text-transform: capitalize;
                          border-radius: 5px;
                          background-color: var(--main-color);
                          &:hover{
                              background-color: var(--secondary-color);
                          }
                      }
                  }
              }
          }
      }
      .navbar-brand{
          .site-title{
              font-weight: 700;
              font-size: 30px;
              font-family: var(--heading-font);
              line-height: 90px;
              color: var(--heading-color);
          }
      }
      .navbar-collapse{
          .navbar-nav{
              display: block;
              width: 100%;
              text-align: right;
              li {
                  +li{
                      // margin-left: 20px;
                  }
                  display: inline-block;
                  font-size: 16px;
                  font-weight: 700;
                  text-transform: capitalize;
                  font-family: var(--heading-font);
                  line-height: 90px;
                  &.current-menu-item{
                      a{
                          color: var(--main-color);
                      }
                  }
                  &.menu-item-has-children{
                    position: relative;
                    z-index: 0;
                    padding-right: 15px;
                    &:before{
                        position: absolute;
                        right: 0;
                        top: 50%;
                        content: '\f107';
                        font-family: 'fontawesome';
                        @include transform(translateY(-50%));
                        @include transition($transition);
                    }
                    &:hover > .sub-menu{
                        top: 100%;
                        visibility: visible;
                        opacity: 1;
                    }
                    .sub-menu{
                        position: absolute;
                        text-align: left;
                        min-width: 220px;
                        margin: 0;
                        padding: 0;
                        list-style: none;
                        left: 0;
                        top: 110%;
                        box-shadow: 0 0 15px 0 rgba(#000,.05);
                        background-color: var(--secondary-color);
                        z-index: 9;
                        border-bottom: 4px solid var(--main-color);
                        visibility: hidden;
                        opacity: 0;
                        @include transition($transition);
                        li{
                            display: block;
                            margin-left: 0;
                            line-height: 24px;
                            font-size: 16px;
                            +li{
                                border-top: 1px solid #e2e2e2;
                            }
                            a{
                                display: block;
                                padding: 12px 30px;
                                background-color: #fff;
                                white-space: nowrap;
                                color: var(--paragraph-color);
                                @include transition($transition);
                                &:hover{
                                    background-color: var(--main-color);
                                    color: #fff;
                                }
                            }
                        }
                        .menu-item-has-children{
                            position: relative;
                            z-index: 0;
                            padding-right: 0px;
                            &:before{
                                position: absolute;
                                right: 15px;
                                top: 50%;
                                content: '\f105';
                                font-family: 'fontawesome';
                                @include transform(translateY(-50%));
                            }
                            > .sub-menu{
                                left: 100%;
                                top: 20px;
                                .sub-menu {
                                    .sub-menu{
                                        left: auto;
                                        right: 100%;
                                    }
                                }
                            }
                            &:hover > .sub-menu{
                                visibility: visible;
                                opacity: 1;
                                li{
                                    &:hover{
                                        &:before{
                                          color: var(--secondary-color);
                                        }
                                    }
                                    a{
                                        
                                    }
                                }
                            }
                        }
                    }
                }
                  // &.menu-item-has-children{
                  //     position: relative;
                  //     z-index: 0;
                  //     padding-right: 15px;
                  //     &:before{
                  //         position: absolute;
                  //         right: 0;
                  //         top: 50%;
                  //         content: '\f107';
                  //         font-family: 'fontawesome';
                  //         @include transform(translateY(-50%));
                  //         @include transition($transition);
                  //     }
                  //     &:hover > .sub-menu{
                  //         top: 100%;
                  //         visibility: visible;
                  //         opacity: 1;
                  //     }
                  //     .sub-menu{
                  //         position: absolute;
                  //         text-align: left;
                  //         min-width: 220px;
                  //         margin: 0;
                  //         padding: 0;
                  //         list-style: none;
                  //         left: 0;
                  //         top: 110%;
                  //         box-shadow: 0 0 15px 0 rgba(#000,.05);
                  //         background-color: var(--secondary-color);
                  //         z-index: 9;
                  //         border-bottom: 4px solid var(--main-color);
                  //         visibility: hidden;
                  //         opacity: 0;
                  //         @include transition($transition);
                  //         li{
                  //             display: block;
                  //             margin-left: 0;
                  //             line-height: 24px;
                  //             font-size: 16px;
                  //             +li{
                  //                 border-top: 1px solid #e2e2e2;
                  //             }
                  //             a{
                  //                 display: block;
                  //                 padding: 12px 30px;
                  //                 background-color: #fff;
                  //                 white-space: nowrap;
                  //                 color: var(--paragraph-color);
                  //                 @include transition($transition);
                  //                 &:hover{
                  //                     background-color: var(--main-color);
                  //                     color: #fff;
                  //                 }
                  //             }
                  //         }
                  //         .menu-item-has-children{
                  //             position: relative;
                  //             z-index: 0;
                  //             padding-right: 0px;
                  //             &:before{
                  //                 position: absolute;
                  //                 right: 15px;
                  //                 top: 50%;
                  //                 content: '\f105';
                  //                 font-family: 'fontawesome';
                  //                 @include transform(translateY(-50%));
                  //             }
                  //             > .sub-menu{
                  //                 left: 100%;
                  //                 top: 20px;
                  //                 .sub-menu {
                  //                     .sub-menu{
                  //                         left: auto;
                  //                         right: 100%;
                  //                     }
                  //                 }
                  //             }
                  //             &:hover > .sub-menu{
                  //                 visibility: visible;
                  //                 opacity: 1;
                  //                 li{
                  //                     &:hover{
                  //                         &:before{
                  //                           color: var(--secondary-color);
                  //                         }
                  //                     }
                  //                     a{
                                          
                  //                     }
                  //                 }
                  //             }
                  //         }
                  //     }
                  // }
                  a{
                      @include transition($transition);
                      &:hover{
                          color: var(--main-color);
                      }
                  }
              }
          }
      }
  }
}

@media only screen and (max-width: 991px){
  .navbar-area {
      &.nav-style-02{
          .nav-container{
              padding: 20px 0px;
              .navbar-toggler{
                  background-color: #fff;
              }
              .navbar-collapse{
                  .navbar-nav{
                      li{
                         &.menu-item-has-children{
                             .sub-menu{
                                  li{
                                      a{
                                          background-color: transparent;
                                          color: var(--secondary-color);
                                      }
                                  }
                             }
                         }
                      }
                  }
              }
          }
      }
      &.nav-style-01{
          .nav-container{
              padding: 20px 0px;
              .navbar-collapse{
                  .navbar-nav{
                      text-align: left;
                      li{
                          &.current-menu-item{
                              a{
                                  color: var(--main-color);
                              }
                              &.menu-item-has-children{
                                  &:before{
                                      color: var(--main-color);
                                  }
                              }
                          }
                          &.menu-item-has-children{
                              z-index: initial;
                              &:before{
                                  color: #656565;
                              }
                              .sub-menu{
                                  li{
                                      +li{
                                          border-top: 1px solid #e2e2e2;
                                      }
                                      a{
                                          background-color: transparent;
                                          color: var(--paragraph-color);
                                          &:hover{
                                              background-color: var(--main-color);
                                              color: #fff;
                                          }
                                      }
                                  }
                                  .menu-item-has-children{
                                      &:hover > .sub-menu{
                                          li{
                                              &:hover{
                                                  &:before{
                                                      color: #656565;
                                                  }
                                              }
                                              a{
                                                  
                                              }
                                          }
                                      }
                                  }
                              }
                          }
                          a{
                              @include transition($transition);
                              color: #656565;
                             
                          }
                          &:hover{
                              &.menu-item-has-children{
                                  &:before{
                                      color: var(--main-color);
                                  }
                              }
                             a{
                                  color: var(--main-color);
                             }
                          }
                      }
                  }
              }
          }
      }
      .nav-container{
          position: relative;
          z-index: 0;
          min-height: 80px;
          // padding: 20px 0px;
          .navbar-brand{
              display: block;
              .navbar-toggler{
                  position: absolute;
                  right: 10px;
                  border: 1px solid #e2e2e2;
              }
          }
           .navbar-collapse {
              .navbar-nav{
                  display: block;
                  margin-top: 20px;
                  li{
                      display: block;
                      text-align: left;
                      line-height: 30px;
                      padding: 10px 0;
                      border-bottom: 1px solid #e2e2e2;
                      &:last-child{
                          border-bottom: none;
                      }
                      +li{
                          margin-left: 0;
                      }
                      &.menu-item-has-children {
                          &:before{
                              top: 25px;
                              right: 20px;
                          }
                          &:hover{
                              padding-bottom: 0;
                              > .sub-menu{
                                  visibility: visible;
                                  height: auto;
                                  opacity: 1;
                                  background-color: transparent;
                                  border-bottom: none;
                              }
                          }
                          .sub-menu{
                              position: initial;
                              display: block;
                              width: 100%;
                              border-top: none;
                              box-shadow: none;
                              margin-left: 0;
                              padding-bottom: 0;
                              visibility: hidden;
                              opacity: 0;
                              height: 0;
                              overflow: hidden;
                              max-height: 250px;
                              overflow-y:scroll;
                              @include transition(height 500ms);

                              .sub-menu .menu-item-has-children:before{
                                  content: "\f107";
                              }
                              li{
                                  &.menu-item-has-children{
                                      &:hover{
                                          &:before{
                                              top: 30px;
                                              color: var(--secondary-color);
                                          }
                                      }
                                  }
                                  padding: 0;
                                  +li{
                                      border-top: none;
                                  }
                                  &:first-child{
                                      border-top: 1px solid #e2e2e2;
                                  }
                              }
                          }
                      }
                  }
              }
           }
      }
  }
}

@media only screen and (max-width: 575px){
  .navbar-area {
      .nav-container{
          margin: 0 15px;
      }
  }
}


// Custom Navbar Style

.navbar-area.nav-style-02 .nav-container .navbar-collapse .navbar-nav > li {
  padding: 7px 20px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
}
.navbar-area.nav-style-02 .nav-container .navbar-collapse .navbar-nav > li.current-menu-item a {
  color: var(--paragraph-color);
}
.navbar-area.nav-style-02 .nav-container .navbar-collapse .navbar-nav li.current-menu-item:before {
  opacity: 0;
}
.navbar-area.nav-style-02 .nav-container .navbar-collapse .navbar-nav li:hover.current-menu-item a {
  color: var(--secondary-color);
}

.navbar-area.nav-style-02 .nav-container {
  padding: 0;
}