header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  position: fixed;
}

.NavbarInTnc {
  background-color: black !important;
}

.websiteLogo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  /* margin-left: 1rem; */

}

.websiteLogoBox {
  background-color: #8276F4;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.25rem;
  height: 2.25rem;
  padding: 0.23438rem 0.14063rem;
  border-radius: 0.375rem;
  background: linear-gradient(180deg, #FFCF66 0%, #D69300 100%);
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.04);
}

.websiteLogoText {
  color: white;
  font-size: 1.8rem;
  font-weight: 500;
}

.Navbar {
  position: fixed;
  top: .8rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-100, 62.5rem);
  padding: 0.8rem 0 0.8rem 1rem;
  width: 100%;
  max-width: 1190px;
}



.navLinks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  position: fixed;
  left: 45%;
  transform: translateX(-50%);
}

.navLinks li {
  list-style: none;
}

.navLinks a {
  text-decoration: none;
  color: white;

  color: var(--text-white, #fff);

  /* Web/Links */
  font-family: var(--Font-Family-Display-style---Web, Inter);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 1.225rem */
  letter-spacing: var(--Letter-spacing---Display-Web-Letter-spacing-Body,
      -0.02813rem);
  padding-bottom: 0.2rem;
}

.navLinks a:hover {
  border-bottom: 1.5px solid white;
}

.activeNavTab {
  border-bottom: 1.5px solid white;

}

.loginBtn {
  border-radius: 6.25rem;
  /* background: var(--Gold-Gradient-Dark, linear-gradient(180deg, #FDCA59 0%, #EC9201 100%)); */
  background: var(--Gold-Gradient-Dark, linear-gradient(180deg, #8276F4 0%, #6c5cff 100%));
  text-align: center;
  color: var(--Neutral-Black, #1A1A1A);
  text-align: center;
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25rem;
  /* 142.857% */
  letter-spacing: -0.03125rem;
  outline: none;
  /* border: 1px solid #E3C074; */
  border: 1px solid #ffffff;
  padding: 0.62rem 1.25rem;

  cursor: pointer;

  margin-right: 1rem;
}

.loginLink {
  color: var(--Neutral-White, #FFF);
  text-align: center;
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem;
  /* 125% */
  letter-spacing: -0.03125rem;
  background: none;
  outline: none;
  margin-right: 1.5rem;
  border: none;
}

.HeaderAboutUs {
  max-width: 81.25rem;
  width: calc(100vw);
}

.NavbarAboutUs {
  width: calc(100vw - 12rem);
  max-width: 81.25rem;
  padding: 0;
}

.NavbarInAboutScroll {
  padding: 0.8rem 1rem 0.8rem 1.2rem;
}

@media screen and (width > 1450px) {
  .Navbar {
    max-width: calc(1440px - 15rem) !important;
  }
}


@media screen and (width <=700px) {
  .Navbar {
    width: 95vw !important;
    top: 1rem;
    left: 1rem;
    max-width: 95vw;
    background-color: black !important;
  }
}

@media screen and (width <=992px) {
  .NavbarAboutUs {
    width: calc(100vw - 10rem) !important;
  }
}

@media screen and (width <=767px) {
  .NavbarAboutUs {
    width: calc(100vw - 6rem) !important;
  }


  .websiteLogo {
    margin-left: .5rem;

  }


  .loginBtn {
    margin-right: 0;
  }

  .navLinks {
    left: 50%;
  }

}


@media screen and (width <600px) {
  .loginBtn {
    margin-right: 0;
  }

}



/* ===================== mobile navigation =========== */


.WebNavbar {
  display: flex;
}

.MobileNavbar {
  display: none;
}

.footerLinksInNav {
  display: none;
}




.logoMenuBtnRight {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navRegisterBtn {
  border-radius: 50px;
  margin-right: .5rem;
  padding: .7rem 1rem;
  cursor: pointer;
}

@media screen and (width <=768px) {


  .websiteLogoBox {
    width: 2rem;
    height: 2rem;
  }

  .websiteLogoText {
    font-size: 1.5rem;
  }

  .WebNavbar {
    display: none;
  }

  .MobileNavbar {
    width: 100vw;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
  }

  .navLinks {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100VH;
    width: 100%;
    z-index: 1;
    background-color: rgb(0, 0, 0);
  }

  .navLinks a {
    font-size: 1rem;
  }

  .mobileLogoDiv {
    width: 95vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .5rem .5rem 0;
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    backdrop-filter: blur(0px);
    border-radius: 50px;
    z-index: 3;
  }


  .CloseNavBar {
    background-color: #333;
    outline: none;
    border: none;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    padding: 1rem;
    cursor: pointer;
  }



  .footerLinksInNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100vw;
    padding: 1rem;
  }

  .footerLinksInNav a {
    font-size: .8rem;
    color: rgba(255, 255, 255, 0.708);

  }

}