/*
Theme Name: NPL v24-2
Theme URI: https://nepalpicturelibrary.org
Author: Akash Kumar Thapa Magar
Author URI: photocircle.com.np
Description: This theme represents the new NPL design
Version: 2.1.2
Text Domain: npl v24
Refer to https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/
*/

/* reset giv */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

::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;
}


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

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

#wpadminbar {
  display: none;
}

.custom-class > .os-scrollbar {
  display: none;
}

.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-theme-dark>.os-scrollbar-horizontal, .os-theme-light>.os-scrollbar-horizontal{
  display: none !important;
}

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

body {
  font-family: var(--barlow);
  /* background-color: var(--7b); */
  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.3s cubic-bezier(0.7, 0, 0.33, 1);
}

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

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

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

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

.menu_click,
.search_click {
  opacity: 1;
  transform: translateY(150%);
  transition: 0.3s 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;
  }
}

@media screen and (max-width: 768px) {
  .menu_click_dummy {
    left: 0px;
  }
}

.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: 2;
  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;
}

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

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

.ham_response {
  display: none;
}

.swiper-pagination-vertical.swiper-pagination-bullets
  .swiper-pagination-bullet {
  width: 7px !important;
  height: 7px !important;
  margin: 5px 0 !important;
}

.page_pagination {
  display: flex;
  align-items: center; /*no flex property*/
  /* height: 100vh;  */
  height: 90vh;
  width: 100%; /*width 80%*/
}

.mySwiperActive {
  opacity: 1;
  transition: opacity 1s cubic-bezier(0.7, 0, 0.33, 1);
  transition-delay: 5s;
}

.swiper-pagination-vertical.swiper-pagination-bullets {
  /* position: absolute;
  top: 240% !important;
  right: 35px !important;
  margin: 0 auto;
  transform: translate3d(0, 0, 0) !important;
  display: flex;
  flex-direction: column; */

  /* fix pagination */
  display: flex;
  flex-direction: column;
  width: 100px;
  justify-content: center;
  align-items: center;
  left: 2.3% !important;
  top: 55% !important;
  transform: translate3d(0px, -50%, 0px) !important;
  opacity: 1;
  visibility: visible;
  animation: slowerLoad 9s ease-in-out;
}

.swiper-pagination-bullet {
  background-color: var(--df);
  opacity: 0.3 !important;
}

.swiper-pagination-bullet-active {
  opacity: 1 !important;
  background-color: var(--df) !important;
}

@media screen and (max-width: 768px) {
  .ham_response {
    /* display: block; */
  }

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

  .swiper-pagination-vertical.swiper-pagination-bullets {
    display: flex;
    position: fixed;
    gap: 10px;
    width: 100% !important;
    justify-content: center;
    align-items: center;
    top: 90% !important;
    left: 0 !important;
    flex-direction: row;
  }

  #whole {
    margin-top: -6px;
  }
}

@media screen and (max-width: 375px) {
  .menu {
    gap: 10px;
  }
  nav {
    margin-left: 60px;
  }
}

.swiper {
  width: 100%;
  height: 100dvh;
  position: relative;
  -webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS */
  transform: translate3d(0, 0, 0);
}

.mySwiper-load-home a {
  text-decoration: none;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  /* background: hsl(0, 2%, 47%); */
  background-color: var(--7b);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.first,
.second {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.7, 0, 0.33, 1),
    transform 1.5s cubic-bezier(0.7, 0, 0.33, 1);
}

li {
  list-style: none;
}

.swiper-slide-prev .first,
.swiper-slide-prev .second {
  opacity: 1;
  transform: translateY(-60px);
}

.swiper-slide-next .first,
.swiper-slide-next .second {
  opacity: 1;
  transform: translateY(60px);
}

.initial-load2 .swiper-slide-active .first,
.initial-load2 .swiper-slide-active .second {
  opacity: 1;
  transform: translateY(0%);
  transition: 1s cubic-bezier(0.7, 0, 0.33, 1);
  transition-delay: 6.5s;
}

.initial-load2 .swiper-slide-active .first img {
  transform: scale(1.1);
  opacity: 1;
  transition: transform 20s cubic-bezier(0.7, 0, 0.33, 1),
    opacity 1.5s cubic-bezier(0.7, 0, 0.33, 1);
  transition-delay: 6.5s;
}

.swiper-slide-active .first,
.swiper-slide-active .second {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 2s cubic-bezier(0.7, 0, 0.33, 1),
    transform 1.5s cubic-bezier(0.7, 0, 0.33, 1);
  transition-delay: 0.55s;
}

/*  */
.first img,
.second img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1);
  opacity: 0;
  transition: transform 10s cubic-bezier(0.7, 0, 0.33, 1),
    opacity 0.6s cubic-bezier(0.7, 0, 0.33, 1); /* to manage the current active image to disappear from screen*/
}

.swiper-slide-active .first > img,
.swiper-slide-active .second > img {
  transform: scale(1.1);
  opacity: 1;
  transition: transform 20s cubic-bezier(0.77, 0, 0.33, 1),
    opacity 1.5s cubic-bezier(0.77, 0, 0.33, 1); /*opacity 2 if not ok*/
  transition-delay: 0.8s;
}

.swiper-slide-active .second > .banner_container_video {
  opacity: 1;
  transition: opacity 3s cubic-bezier(0.77, 0, 0.33, 1);
  transition-delay: 0.3s;
}

.swiper-slide-prev .second > .banner_container_video {
  opacity: 1;
  transition: opacity 2s cubic-bezier(0.77, 0, 0.33, 1);
  transition-delay: 0.3s;
}

@keyframes breadth {
  0% {
    transform: scale(1);
  }

  100% {
  }
}

.swiper-slide-prev .first > img,
.swiper-slide-prev .second > img {
  animation: imagePrevNext 1s cubic-bezier(0.7, 0, 0.33, 1);
}

.swiper-slide-next .first > img,
.swiper-slide-next .second > img {
  animation: imagePrevNext 1s cubic-bezier(0.7, 0, 0.33, 1); /* set to 1 else for both prev and next*/
}

@keyframes imagePrevNext {
  0%,
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.swiper-slide-active {
  opacity: 1;
}

@keyframes slowImage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.projects {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 45px;
  text-align: left;
  opacity: 1;
  position: relative;
  justify-content: center;
  transform: translateY(150%);
  margin-left: 13.2%;
  /* margin-top: -70px; */
}

.npl-swiper-heading-container {
  min-height: 55px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: clip;
  /* padding-bottom: 5px; */
}

.swiper-slide-next,
.swiper-slide-prev {
  opacity: 1;
}

.swiper-slide-next .projects {
  opacity: 1;
  transform: translateY(150%);
  transition: transform 1s cubic-bezier(0.7, 0, 0.33, 1);
  transition-delay: 0.3s;
}

.swiper-slide-prev .projects {
  opacity: 1;
  transform: translateY(-150%);
  transition: transform 1s cubic-bezier(0.7, 0, 0.33, 1);
  transition-delay: 0.3s;
}

.swiper-slide-active .projects {
  opacity: 1;
  transform: translateY(0%);
  transition: transform 1.5s cubic-bezier(0.7, 0, 0.33, 1);
}

.initial-load .swiper-slide-active .projects {
  transition-delay: 6s; /* Delay for initial load */
}

.projects p {
  font-family: var(--libre);
  font-size: var(--twenty);
  font-style: italic;
  max-width: 540px;
  color: var(--df);
  font-weight: var(--sm);
  line-height: var(--libreHeight);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: clip;
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3));
}

.project_title {
  margin-top: 8px;
}

.projects h2 {
  font-family: var(--libre);
  font-size: var(--fiftyFour);
  color: var(--ff);
  max-width: 720px;
  font-weight: var(--xl);
  line-height: var(--projectHeight);
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3));
}

@media screen and (max-width: 900px) {
  .projects p,
  .projects h2 {
    width: 100%;
  }
}

@media screen and (max-width: 500px) {
  .projects h2 {
    font-size: 1.5rem;
  }

  .page_pagination {
    width: 80% !important;
    align-items: start;
  }
}

.hamburger {
  display: flex;
  flex-direction: column;
  height: 40px;
  width: 35px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  display: none;
  z-index: 1;
  transform: translateY(-5px);
  transition: transform 0.4s ease-in-out;
  pointer-events: auto;
}

.bar {
  border-radius: 5px;
  height: 2px;
  width: 100%;
  background-color: var(--df);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  margin: 10px 0 0 0;
}

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

.ham_response_comm {
  display: block;
}

.ham_response {
  display: none;
}

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

@media screen and (max-width: 768px) {
  .projects {
    width: 100% !important;
    justify-content: start;
    margin-top: 0;
  }

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

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

  .logo_hide {
    text-align: right;
    margin-top: 0px;
    gap: 10px;
    pointer-events: auto;
  }
}

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

#nextSection {
  display: block;
}

/*  */
.hide_top {
  opacity: 1;
}

.topHide {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.topHideDirect {
  display: none;
}

.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 !important;
  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 !important;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

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

@media screen and (max-width: 768px) {
  .hidden {
    width: 90%;
    left: 0;
    top: 30px;
    padding-right: 10px;
  }

  .npl-swiper-heading-container {
    min-height: auto !important;
  }
}

/* animations */
.SlowerActive {
  opacity: 1;
  visibility: visible;
  animation: slowerLoad 9s ease-in-out;
}

@keyframes slowerLoad {
  0%,
  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.video_container {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video_clip {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

/* .video-section {
  height: 50% !important;
} */

.banner_container_video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media screen and (max-width: 900px) {
  .video_container {
    height: 60vh;
  }

  .video-section {
    gap: 20px !important;
    min-height: 90% !important;
  }
}

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

  .video-section {
    width: 90% !important;
  }
}

@media screen and (max-width: 500px) {
  .support,
  .volunteer {
    font-size: clamp(0.8rem, 5vw, var(--thirtySix)) !important;
  }

  .contribution {
    font-size: clamp(0.6rem, 5vw, var(--twenty)) !important;
    width: 100% !important;
  }
}

/* gradient */
.swiper-slide-next .npl-gradient-section,
.swiper-slide-prev .npl-gradient-section {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  transition-delay: 1s;
}

.swiper-slide-active .npl-gradient-section {
  opacity: 0;
  animation: gradient 0.3s ease-in-out forwards;
  animation-delay: 1.2s;
}

.npl-gradient-section {
  position: absolute;
  z-index: 2;
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.4) 4%,
    rgba(0, 0, 0, 0.4) 5%,
    rgba(0, 0, 0, 0.2) 10%,
    rgba(0, 0, 0, 0.2) 30%,
    rgba(255, 255, 255, 0) 60%
  );
  pointer-events: none;
}

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

  100% {
    opacity: 1;
  }
}

/*  */

.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;
}

.npl-secondary-nav-hamburger-responsive-register {
  display: none;
}

@media screen and (max-width: 1024px) {
  .npl-header-primary-container {
    height: 70px;
    /* position: fixed; */
    background-color: var(--41);
    align-items: center;
    padding: 5px 10px;
  }
  .menu {
    transform: rotate(0deg);
    flex-direction: row-reverse;
    gap: 10px;
    width: fit-content;
  }

  .logo_hide {
    pointer-events: auto;
    gap: 10px;
  }

  .back1,
  .back {
    color: var(--df);
    width: fit-content;
    height: fit-content;
    visibility: visible;
    opacity: 1;
  }

  .npl-secondary-nav-hamburger-responsive-register {
    display: block;
  }

  .npl-community-overflow {
    display: none;
  }

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

  .npl-login-dummy,
  .npl-community-dummy {
    display: none;
  }

  nav {
    margin-top: -37px;
    margin-left: 55px;
    height: auto;
  }

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