/* Required CSS */

a {
  color: inherit;
}
body {
  padding-top: 125px;
}
#dummy-wrap {
  position: relative;
  z-index: 999;
}
#phn-cstm-shrn-mnu {
  background-color: #fff;
  border: solid 1px #fff;
  border-radius: 6px;
}
#phn-cstm-shrn-mnu a {
  color: #17a302;
  padding: 0.8rem 2rem;
}
/* #phn-cstm-shrn-mnu a:before {
  content: "";
  background: url(../image/phone-solid.svg);
  width: 15px;
  height: 15px;
  position: absolute;
  background-size: cover;
  z-index: 2;
  top: 17px;
  left: -17px;
  filter: invert(1);
} */
#lg-fnt-cstm-shrn {
  font-size: 10px;
  color: white;
  text-align: center;
  width: 70px;
  margin-top: 5px;
}
.nav1-header {
  background-color: #17a302;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: 0.5s;
  z-index: 1;
  padding: 1rem 0rem 0rem 0rem;

  .nav-menu ul {
    display: flex;
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
    margin-bottom: 0;
    justify-content: right;
    column-gap: 50px;

    & a {
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      font-family: "Poppins";
    }
  }
  .nav-menu {
    width: 100%;
  }

  .nav-container {
    max-width: 1320px;
    margin: auto;
    width: 100%;
    padding-inline: 1rem;
  }

  .nav-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav-row {
    display: flex;
    width: 100%;

    &.nav-row-right {
      justify-content: end;

      & .nav-right-bar {
        display: flex;
      }
    }
  }

  .nav-search {
    margin-right: 1.5rem;
    display: flex;
    align-items: center;
  }

  .nav-logo {
    width: 20%;
    text-align: center;
    transition: 1s;
  }

  .nav-mobile-canvas {
    display: none;
  }

  .nav-logo-sticky {
    scale: 1;
    width: 20%;
    transition: 0.5s;
  }

  .nav-btn-extra a {
    border: solid 1px #fff;
    padding: 10px 20px;
    text-align: center;
    border-radius: 10px;
  }

  /* Desktop Only */
  @media only screen and (min-width: 1201px) {
    &.nav-header-sticky {
      padding: 1rem 0rem 0rem 0rem;

      .nav-logo-sticky {
        scale: 1;
        width: 20%;
      }

      .nav-logo {
        scale: 0;
        width: 0;
      }
    }
  }

  /* Tab + Moblie */
  @media only screen and (max-width: 1200px) {
    .nav-row {
      display: none;
    }
    .nav-logo-sticky {
      scale: 1;
    }

    .nav-mobile-canvas {
      position: fixed;
      width: 90%;
      height: 100%;
      top: 0px;
      left: 10%;
      background-color: #fff;
      display: grid;
      align-content: center;
      text-align: center;
      /* transition: 1s; */

      .nav-menu .nav-list {
        flex-wrap: wrap;

        & li {
          width: 100%;
          padding: 5px 10px;
          /* border-bottom: solid 1px #fff; */
        }

        & li:last-child {
          border-bottom: none;
        }
      }

      .nav-menu .nav-list a {
        font-size: 20px;
        color: #17a302;
      }
    }
    .nav-wrap {
      width: 95%;
      margin: auto;
    }
  }
  /* Tab + Moblie End */
}

body.overflow-y-0 {
  overflow-y: hidden;
}

body a {
  color: inherit;
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
}

.lg-none {
  display: none;
}

.nb-item-link {
  text-decoration: none;
}

.nb-btn-style-1 {
  display: inline-flex;
  padding: 12px 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #fff;
  transition: 0.5s;
}

.nav1-header .nb-btn-style-1:hover {
  color: #242517;
  background: #fff;
}

.nb-btn-style-2 {
  display: inline-flex;
  padding: 12px 5px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  position: relative;
  margin-inline: 5px;
}

.nb-btn-style-2::after {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  bottom: 0;
  background-color: #fff;
  opacity: 0;
  transition: 0.5s;
}
.nb-btn-style-2:hover::after,
.nb-btn-style-2:active::after {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  bottom: 0;
  opacity: 1;
}
.nb-btn-style-3 {
  background: transparent;
  border: 1px solid transparent;
  font-size: 16px;
  color: #000;
}

.nb-page-search {
  position: relative;
  right: -5px;
  width: 225px;
  height: 32px;
  border-radius: 18px;
}

.nb-page-search input[name="nb_search"] {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  border-radius: 18px;
  padding-left: 10px;
}

#nb-search-send {
  position: absolute;
  z-index: 1;
  left: 87%;
  top: 0px;
  border-radius: 50%;
  width: 30px;
  aspect-ratio: 1/1;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.contacts {
  margin-inline: 20px;
}
@media only screen and (max-width: 1200px) {
  /* code  */
  .sm-none {
    display: none;
  }

  .sm-block {
    display: block;
  }
  .nb-page-search {
    position: absolute;
    right: -20px;
    bottom: -60px;
    width: 0;
    transition: 0.2s linear;
  }
  .nb-page-search input[name="nb_search"],
  #nb-search-send {
    padding: 0;
    visibility: hidden;
    transition: 0.3s linear;
  }
  .nav-mobile-btn {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .sm-search,
  .sm-contact {
    font-size: 18px;
    background-color: transparent;
    outline: none;
    border: none;
    color: #fff;
  }
  .sm-search-wrapper {
    position: relative;
  }
  .sm-search-wrapper form {
    position: absolute;
    width: 0;
    height: 30px;
    bottom: -70px;
    left: -160px;
    border-radius: 20px;
    transition: 0.2s linear;
    transform-origin: center;
    z-index: 1;
  }
  .sm-search-wrapper form.showsearch {
    width: 360px;
  }
  .sm-search-wrapper form input {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    border-radius: inherit;
    padding-left: 0;
  }
  .sm-search-wrapper form.showsearch input {
    padding-left: 10px;
  }
  .nbbar-toggler-icon {
    position: relative;
    width: 25px;
    height: 20px;
    display: grid;
  }
  .nbbar-toggler-icon .toggler-bars {
    width: 100%;
    height: 3px;
    border-radius: 10px;
    background-color: #fff;
    transition: 0.6s ease-in;
  }
  .navclose .nbbar-toggler-icon .toggler-bars {
    background-color: #17a302;
  }
  .navclose .nbbar-toggler-icon span:nth-child(2) {
    transform: translateX(-6px);
  }
  .navclose .nbbar-toggler-icon span:nth-child(3) {
    transform: translateX(-12px);
  }
  .nb-toggler {
    background: transparent;
    outline: none;
    border: none;
    position: relative;
    z-index: 2;
  }
  .sm-social-contacts {
    padding-bottom: 20px;
    display: flex;
    gap: 15px;
    justify-content: center;
  }
  .sm-social-contacts i,
  .sm-social-contacts a {
    color: #fff;
    font-size: 20px;
  }
  .sm-social-contacts .btn-style-1 {
    padding-top: 10px;
    width: 60%;
  }
  .sm-social-contacts .btn-style-1:hover a {
    color: #17a302;
  }
  #nb-search-send {
    left: 90%;
  }
}
@media only screen and (min-width: 489px) and (max-width: 1200px) {
  .nb-page-search {
    position: absolute;
    right: 20px;
    bottom: 0px;
    width: 0;
    transition: 0.2s linear;
  }
}

.nav-mobile-canvas {
  transform: translateX(100%);
  transition: 0.5s ease-in;
  border-radius: 50%;
}
.navshow.nav-mobile-canvas {
  transform: translateX(0);
  border-radius: 0%;
}
.nav-mobile-canvas .nav-menu {
  display: grid;
  margin: auto;
  justify-content: space-between;
  grid-template-rows: 120%;
}
.nav-btn-extra.nav-menu {
  display: flex;
  justify-content: center;
}
