html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

::selection {
  background-color: var(--ff);
  color: black;
}

:root{
    --gray2: #adaaa7;
    /* --bc: #bcb86f; */
    /* --bc: #c2ba80; */
    --bc: #bfb77d;
    --df: #e6e6de;
    --7b: #696565;
    --71: #696565;
    --ff: #ffcc88;
    --3a: #3a3636;
    --be: #bea16d;
    --be9: #cd979e;
    /* --7a: #7a9bb3; */
    /* --7a: #8bafaf; */
    --7a: #8db2cd;
    --41: #414b5e;
    /* --92: #92b5b5; */
    /* --92: #aea5b4; */
    --92: #b3a5bd;
    /* --e0: #e8a691; */
    --e0: #d6aa90;
    --8d: #99c2c2;
    --white: #f1f1e4;
    --black: #000;
    --fourteen: 0.875rem;
    --fifteen: 0.938rem;
    --sixteen: 1rem;
    --eighteen: 1.125rem;
    --twenty: 1.25rem;
    --twentyTwo: 1.375rem;
    --twentyFive: 1.563rem;
    --twentyEight: 1.75rem;
    --thirty: 1.875rem;
    --thirtySix: 2.25rem;
    --fiftyFour: 3.375rem;
    --sixtySix: 4.125rem;
    --oneEighty: 11.25rem;
    --projectHeight: 1.1;
    --barlowHeight: 1.3;
    --libreHeight: 1.4;
    --deva: "Noto Serif Devanagari";
    --barlow: "Barlow";
    --libre: "libre baskerville";
    --sansDeva: "Noto Sans Devanagari";
    --min: 100;
    --sm: 200;
    --authorWeight: 400;
    --normalWeight: 300;
    --eventWeight: 350;
    --menuWeight: 450;
    --xl: 600;
    --dblXl: 850;
    --smButton: 18px;
    --medButton: 30px;
    --xlButton: 44px;
}

.npl-blog-glass-plate h1 {
  font-size: clamp(var(--fourteen), 8vw, var(--sixtySix));
}

.os-padding {
  overflow-x: clip !important;
}

.show-overlay-scroll .custom-class > .os-scrollbar {
  display: block !important;
  padding: 0 0 0 2px;
}

.custom-class > .os-scrollbar > .os-scrollbar-track {
  border-radius: 0;
}

.os-theme-dark > .os-scrollbar-vertical .os-scrollbar-handle:before {
  background-color: transparent;
  border-radius: 10px;
  width: 8px;
  left: 0 !important;
  right: 0 !important;
}

.os-viewport {
  overflow-x: clip !important;
}

.os-scrollbar-horizontal {
  display: none;
}

/* menu */
body {
  font-family: "Barlow";
  background-color: var(--df);
  touch-action: none;
}

.remover-padding {
  padding-right: 0;
}

.npl-menu-overflow {
  cursor: pointer;
}

.npl-menu-items:hover .menu_click {
  cursor: pointer;
  transform: translateY(0);
  transition: 0.25s cubic-bezier(0.7, 0, 0.33, 1);
}

.npl-search-items:hover .search_click {
  cursor: pointer;
  transform: translateY(0);
  transition: 0.25s cubic-bezier(0.7, 0, 0.33, 1);
}

.menu_click_dummy {
  position: absolute;
  cursor: pointer;
  transition: 0.2s cubic-bezier(0.7, 0, 0.33, 1);
}

.search_click_dummy {
  position: absolute;
  bottom: 0px;
  cursor: pointer;
  transition: 0.2s cubic-bezier(0.7, 0, 0.33, 1);
}

.menu_click_show {
  opacity: 1;
  transform: translateY(-110%) !important;
  transition: 0.2s cubic-bezier(0.7, 0, 0.33, 1);
}

.menu_click,
.search_click {
  opacity: 1;
  transform: translateY(150%);
  transition: 0.2s cubic-bezier(0.7, 0, 0.33, 1);
}

@media screen and (max-width: 1024px) {
  .menu_click,
  .search_click {
    opacity: 1 !important;
    transform: translateY(0);
  }

  .search_click_dummy,
  .menu_click_dummy {
    display: none;
  }
}

.menu_fixed {
  position: fixed;
}

.nav_fixed {
  position: fixed;
  z-index: -1000;
}

.logo_fixed {
  width: 60px;
  height: 60px;
  position: fixed;
}

.npl-header-logo-section {
  z-index: 1000;
  width: 100%;
  position: absolute;
  pointer-events: none;
}

.npl-header-primary-container {
  display: flex;
  width: 100%;
  padding: 2.2% 0px 0px 1.8%;
  justify-content: space-between;
}

.npl-header-logo-section-div {
  width: 60px;
  height: 60px;
  position: fixed;
}

.npl-header-logo-section-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: auto;
}

.npl-logo-change {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 0.3s cubic-bezier(0.7, 0, 0.33, 1);
}

.npl-logo-change-color {
  opacity: 1;
  transition: 0.3s cubic-bezier(0.7, 0, 0.33, 1);
}

nav {
  margin-top: 75px;
  margin-left: -2px;
  width: 100px;
  position: relative;
  height: 10vh;
  pointer-events: auto;
}

.menu {
  transform: rotate(270deg);
  display: flex;
  gap: 20px;
  position: relative;
  z-index: 1;
  color: var(--df);
  font-size: var(--fifteen);
  font-weight: var(--menuWeight);
  overflow: clip;
  width: 110px;
  cursor: pointer;
}

.logo_images {
  display: flex;
  margin-top: -5px;
  padding-right: 1.8%;
  position: absolute;
  right: 0;
}

.back {
  text-decoration: none;
  font-size: var(--fifteen);
  font-weight: var(--menuWeight);
  color: var(--71);
}

.logo_content {
  display: flex;
  gap: 30px;
  align-items: start;
}

.logo_hide {
  display: flex;
  gap: 30px;
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.33, 1);
}

.ham_response {
  display: none;
}

li {
  list-style: none;
}

.hamChange-71 {
  background-color: var(--71);
}

.ham_response_comm {
  display: block;
}

/* .ham_response {
  display: none;
} */

.whole {
  transform: translateY(-100%);
  transition: transform 1s ease;
}

.show {
  background-color: black;
  width: 100%;
  height: auto;
}

.hide_top {
  opacity: 1;
}

.topHide {
  opacity: 0 !important;
  /* transition: opacity 0.4s ease-in-out; */
}

.topHideDirect {
  display: none !important;
}

.background-initial {
  opacity: 0;
}

.back-logo-opacity {
  opacity: 0 !important;
}

.loadImagesVisibility {
  visibility: hidden !important;
}

@keyframes backLoad {
  0% {
    opacity: 0;
  }

  0.1% {
    visibility: hidden;
  }

  100% {
    visibility: hidden;
    opacity: 0;
  }
}

.addBackground-logo-content {
  background: rgba(255, 255, 255, 0.6);
  height: fit-content;
  opacity: 1;
  /* transition: opacity 0.4s cubic-bezier(0.7, 0, 0.33, 1); */
  pointer-events: auto;
  padding: 2px 1.8% 2px 5px;
}

.addBackground-remove {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  pointer-events: none;
}

.hidden {
  position: fixed;
  left: 0;
  width: 100%;
  justify-content: end;
  padding-right: 70px;
  top: 34px;
}

.back1 {
  display: block;
  text-decoration: none;
  color: var(--71);
  font-size: var(--fifteen);
  font-weight: var(--menuWeight);
  pointer-events: auto;
  height: fit-content;
  width: fit-content;
}

.npl-community-overflow {
  position: relative;
  width: 126px;
  height: 18px;
  overflow-y: clip;
}

.npl-community-original {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(110%);
  transition: 0.3s ease-in-out;
}

.npl-community-dummy {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(0);
  transition: 0.3s ease-in-out;
}

.npl-community-overflow:hover .npl-community-original {
  transform: translateY(0);
  transition: 0.3s ease-in-out;
}

.npl-community-overflow:hover .npl-community-dummy {
  transform: translateY(-110%);
  transition: 0.3s ease-in-out;
}

/* login overflow */
.npl-login-overflow {
  position: relative;
  height: 18px;
  width: 32px;
  overflow: clip;
}

.npl-login-original,
.npl-login-dummy {
  position: absolute;
  left: 0;
  top: 0;
}

.npl-login-original {
  transform: translateY(110%);
  transition: 0.3s ease-in-out;
}

.npl-login-dummy {
  transform: translateY(0);
  transition: 0.3s ease-in-out;
}

.npl-login-overflow:hover .npl-login-original {
  transform: translateY(0);
  transition: 0.3s ease-in-out;
}

.npl-login-overflow:hover .npl-login-dummy {
  transform: translateY(-110%);
  transition: 0.3s ease-in-out;
}

.npl-logo-second {
  display: none;
}

@media screen and (max-width: 1024px) {
  .npl-logo-second {
    display: block;
  }

  .npl-logo-first-img {
    display: none;
  }

  .npl-header-primary-container {
    height: 70px;
    position: fixed;
    background-color: var(--41);
    align-items: center;
    padding: 5px 10px;
  }

  .npl-login-original {
    transform: translateY(0);
    transition: 0.3s ease-in-out;
  }

  .npl-login-dummy {
    display: none;
  }
  .hidden {
    width: 90%;
    left: 0;
    top: 30px;
    padding-right: 10px;
  }

  .ham_response {
    display: block;
  }

  .ham_response_comm {
    display: none;
  }

  nav {
    /* margin-top: -52px;
    margin-left: 35px;
    height: auto; */

    margin: 0;
    position: absolute;
    top: 55%;
    /* margin-top: -52px; */
    /* margin-left: 35px; */
    height: auto;
    left: 70%;
    transform: translate(0%, -70%);
  }

  .menu {
    transform: rotate(0deg);
    flex-direction: row-reverse;
  }

  #whole {
    margin-top: -6px;
  }
  .menu {
    gap: 10px;
  }

  .back,
  .back1 {
    color: var(--df);
    transition: 0s;
  }

  .menu_click_dummy {
    left: 0px;
  }

  .projects {
    width: 100% !important;
    justify-content: start;
    margin-top: 0;
  }

  .ham_response_comm {
    display: none;
  }

  @keyframes trans {
    from {
      opacity: 0;
      display: block;
    }

    to {
      opacity: 1;
      display: none;
    }
  }

  .logo_hide {
    text-align: right;
    gap: 10px;
  }

  .logo_images {
    /* margin-right: 2.8%; */
  }

  .npl-header-logo-section-div {
    width: var(--xlButton);
    height: var(--xlButton);
  }
}