*,
  ::before,
  ::after {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
  }

  html {
      font-size: 13px;
  }

  body {
      font-family: "Poppins", sans-serif;
      font-size: 1rem;
      /* background: #222f37; */
      /* color: #d6e0f9; */
  }

  .navs {
      width: 100%;
      /* position: fixed; */
      top: 0;
      left: 0;
      background: #101d23;
      padding: 0 5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .logo {
      width: 5rem
  }

  .logo img {
      width: 100%;
  }

  .menu {
      list-style: none;
  }

  .menu li {
      position: relative;
      float: left;
  }

  .menu li a {
      font-family: "Poppins", sans-serif;
      font-size: 1.2rem;
      color: #ffffff;
      display: block;
      text-decoration: none;
      padding: 1rem 1.5rem;
  }

  .subms {
      position: absolute;
      left: 0;
      background: #101d23;
      display: none;
      transition: all .3s ease-in-out;
  }

  .subms-wrapper:hover .subms,
  .subms-wrapper:focus-within .subms {
      display: initial;
  }

  .subms li {
      width: 100%;
      border-top: .1rem solid #222f37;
      list-style: none;
  }

  .headertoggle-btn {
      display: none;
      /* Initially hide the toggle button */
      z-index: 1000;
  }

  .icon {
      position: relative;
      width: 1.5rem;
      height: .8rem;
      cursor: pointer;
      z-index: 100;
  }

  .icon::before {
      top: 0;
      right: 0;
      content: '';
      position: absolute;
      width: 2rem;
      height: .2rem;
      background-color: #d6e0f9;
      transition: all 0.3s ease-in-out;
  }

  .icon::after {
      bottom: 0;
      right: 0;
      content: '';
      position: absolute;
      width: 1.5rem;
      height: .2rem;
      background-color: #d6e0f9;
      transition: transform 0.3s ease-in-out;
  }

  /* Rotate the before and after lines to create the close icon effect */
  .icon.active::before {
      width: 1.5rem;
      transform: rotate(-45deg) translate(-0.21rem, 0.21rem);
  }

  .icon.active::after {
      transform: rotate(45deg) translate(-0.21rem, -0.21rem);
  }


  @media (max-width: 991px) {
      .headertoggle-btn {
          display: block;
      }

      .menu {
          width: 100%;
          position: absolute;
          top: 109px;
          right: 0;
          z-index: 9999;
          background: #101d23;
          border-top: 0.5rem dashed #3295d2;
          display: none;
      }

      .menu.active {
          display: initial
      }

      .menu li {
          width: 100%;
          border-top: .1rem solid #222f37;
      }

      .subms {
          position: relative;
          width: 100%;
      }

      .subms li {
          background: #222f37;
          border-top: .1rem solid #101d23;
      }

      .subms li a {
          padding-left: 2rem;
      }
      /* .nav-he{
          height: 70px !important;
      } */
  }

  .menu>li{
      margin-left: 5px;
      margin-right: 5px;
      text-align: center;
  }
  .menu>li>a{
      font-size: 18px;
      margin-top: 5px;
      margin-bottom: 5px;
  }
  .headbtn {
  display: flex !important;
  height: 50px;
  font-size: 18px;
  border-radius: 12px;
  align-items: center;
  font-weight: 700;
  color: white;
  border: 3px solid rgb(70, 112, 252);
  cursor: pointer;
  position: relative;
  background-color: transparent;
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
  font-family: inherit;
}

.headbtn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(80, 223, 216);
  transform: translateX(-100%);
  transition: all .3s;
  z-index: -1;
}

.headbtn:hover::before {
  transform: translateX(0);
}