html {
  scroll-behavior: smooth;
}

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

:root {
  /* colors */
  --gray2: #adaaa7;
  /* --bc: #bcb86f; */
  /* --bc: #c2ba80;  */
  --bc: #bfb77d; /*new color*/
  --df: #e6e6de;
  --7b: #696565;
  --71: #696565;
  --ff: #ffcc88;
  --3a: #3a3636; /*exhibition bg*/
  /* --ff: #ffd362; new color */
  --be: #bea16d;
  --be9: #cd979e;
  /* --7a: #7a9bb3; */
  /* --7a: #8bafaf; */
  --7a: #8db2cd; /*introduction color*/
  --41: #414b5e;
  /* --92: #92b5b5; */
  /* --92: #aea5b4; */ /*new color*/
  /* --92: #95bb98; new color */
  --92: #b3a5bd;
  /* --e0: #e8a691; */
  --e0: #d6aa90;
  --8d: #99c2c2; /*research color*/
  --white: #f1f1e4;
  --black: #000;

  /* font-size */
  --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;

  /* line-height */
  --projectHeight: 1.1;
  --barlowHeight: 1.3;
  --libreHeight: 1.4;

  /* fonts */
  --deva: "Noto Serif Devanagari";
  --barlow: "Barlow";
  --libre: "libre baskerville";

  /* font-weight */
  --sm: 200;
  --authorWeight: 400;
  --normalWeight: 300;
  --eventWeight: 350;
  --menuWeight: 450;
  --xl: 600;
  --dblXl: 850;

  /* button size */
  --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;
  }

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

/* aside */
.parallex {
  height: auto;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: clip;
  position: relative;
  background: black;
}

.checkImg {
  width: 250px;
  height: 250px;
}

.inside_parallex {
  border: 1px solid var(--bc);
  color: var(--df);
  height: 50%;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  justify-content: center;
  position: relative;
  position: absolute;
  overflow: clip;
  width: 740px;
}

.image_parallex {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0px;
  transform: translate3d(0, 0, 0);
}

.image_parallex img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transform: translateY(100px);
  animation: imageParallex 0.3s ease-in-out;
  animation-timeline: view();
  opacity: 0.8;
}

@keyframes imageParallex {
  0% {
    transform: translateY(100px);
  }

  100% {
    transform: translateY(-50px);
  }
}

@media screen and (max-width: 768px) {
  .image_parallex img {
    margin: 0;
  }

  .inside_parallex {
    gap: 40px;
  }
}

@media screen and (max-width: 500px) {
  .parallex {
    height: 40vh;
  }

  .inside_parallex {
    height: 90%;
    width: 100% !important;
    gap: 10px;
  }

  aside .inside_parallex h2 {
    font-size: 1.5rem;
  }
}

.support {
  font-size: var(--thirtySix);
  font-family: var(--libre);
  font-style: italic;
  color: var(--bc);
}

.volunteer {
  font-size: var(--thirtySix);
  font-weight: var(--xl);
}

.contribution {
  text-align: center;
  width: 55%;
  font-size: var(--twenty);
  font-family: var(--libre);
  line-height: var(--libreHeight);
  color: var(--df);
}

@media screen and (max-width: 850px) {
  aside .inside_parallex {
    width: 90%;
  }

  .image_parallex {
    width: 100%;
  }
}