/* =========================================================
   FAUNA OF INDIA
   Modern Responsive Stylesheet
   Primary Color: #2a4173
========================================================= */


/* =========================================================
   GLOBAL BOX SIZING
========================================================= */

.fauna-home,
.fauna-home *,
.fauna-home *::before,
.fauna-home *::after {
     box-sizing: border-box;
}


/* =========================================================
   BODY / PAGE
========================================================= */

html,
body {
     width: 100%;
     max-width: 100%;
     margin: 0;
     padding: 0;
     overflow-x: hidden;
}

.fauna-home {
     width: 100%;
     max-width: 100%;
     margin: 0;
     padding: 0;
     overflow: hidden;
     background: #f5f7fb;
}


/* =========================================================
   FAUNA BANNER
========================================================= */

.fauna-banner {
     position: relative;

     width: 100%;
     height: 430px;

     margin: 0;
     padding: 0;

     overflow: hidden;

     background: #111827;
}


/* =========================================================
   CAROUSEL
========================================================= */

.fauna-banner .carousel,
.fauna-banner .slick-list,
.fauna-banner .slick-track {
     width: 100%;
     height: 100%;

     margin: 0;
     padding: 0;
}

.fauna-banner .slick-track {
     display: flex;
}

.fauna-banner .slick-slide {
     width: 100%;
     height: 100%;

     margin: 0;
     padding: 0;
}




/* =========================================================
   SLIDE
========================================================= */

.fauna-slide {
     position: relative;

     width: 100%;
     height: 430px;

     margin: 0;
     padding: 0;

     overflow: hidden;

     background: #111827;
}


/* =========================================================
   IMAGE
========================================================= */

.fauna-slide img {
     display: block;

     width: 100%;
     /* height: 100%; */

     margin: 0;
     padding: 0;

     object-fit: cover;
     object-position: center center;

     transform: scale(1);

     transition:
          transform 1.2s ease;
}


/* Active slide slight zoom */

.fauna-banner .slick-active .fauna-slide img {
     transform: scale(1.02);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.fauna-slide::after {
     content: "";

     position: absolute;

     inset: 0;

     z-index: 1;

     pointer-events: none;

     background:
          linear-gradient(to top,
               rgba(0, 0, 0, .70) 0%,
               rgba(0, 0, 0, .25) 40%,
               rgba(0, 0, 0, .02) 100%);
}


/* =========================================================
   SLIDE CAPTION
========================================================= */

.slide-caption {
     position: absolute;

     left: clamp(20px, 6vw, 90px);
     bottom: 35px;
     z-index: 5;
   
     margin: 0;
     padding: 10px 20px;

     color: #ffffff;

     background: #2a4173;

     border-left: 5px solid #f5b82e;
     border-radius: 0 8px 8px 0;

     font-size: clamp(18px, 2vw, 26px);
     font-weight: 700;

     line-height: 1.3;

     box-shadow:
          0 8px 25px rgba(0, 0, 0, .30);

     opacity: 1;
     visibility: visible;

     transform: translateX(0);

     transition:
          opacity .5s ease,
          transform .5s ease;
}


/* Active slide caption */

.fauna-banner .slick-active .slide-caption {
     opacity: 1;
     visibility: visible;

     transform: translateX(0);
}


/* =========================================================
   SLICK ARROWS
========================================================= */

.fauna-banner .slick-prev,
.fauna-banner .slick-next {
     position: absolute;

     top: 50%;

     z-index: 10;

     width: 48px;
     height: 48px;

     margin: 0;
     padding: 0;

     transform: translateY(-50%);

     border: 1px solid rgba(255, 255, 255, .35);
     border-radius: 50%;

     background: rgba(54, 80, 138, .85);

     backdrop-filter: blur(6px);

     transition:
          background .25s ease,
          transform .25s ease;
}

.fauna-banner .slick-prev {
     left: 20px;
}

.fauna-banner .slick-next {
     right: 20px;
}


/* Arrow hover */

.fauna-banner .slick-prev:hover,
.fauna-banner .slick-next:hover {
     background: #2a4173;

     transform:
          translateY(-50%) scale(1.08);
}


/* Arrow icon */

.fauna-banner .slick-prev::before,
.fauna-banner .slick-next::before {
     color: #ffffff;

     font-size: 23px;

     opacity: 1;
}


/* =========================================================
   DOTS
========================================================= */

.fauna-banner .slick-dots {
     position: absolute;

     left: 0;
     right: 0;
     bottom: 12px;

     z-index: 10;

     display: flex;

     justify-content: center;
     align-items: center;

     gap: 6px;

     width: 100%;

     margin: 0;
     padding: 0;

     list-style: none;
}

.fauna-banner .slick-dots li {
     width: 9px;
     height: 9px;

     margin: 0;
     padding: 0;
}

.fauna-banner .slick-dots li button {
     width: 9px;
     height: 9px;

     margin: 0;
     padding: 0;

     border: 0;
     border-radius: 50%;

     background: rgba(255, 255, 255, .55);

     cursor: pointer;
}

.fauna-banner .slick-dots li button::before {
     display: none;
}

.fauna-banner .slick-dots li.slick-active button {
     background: #f5b82e;

     transform: scale(1.3);
}


/* =========================================================
   REMOVE ANY EXTRA SPACE FROM SLICK
========================================================= */

.fauna-banner .slick-list {
     margin: 0 !important;
     padding: 0 !important;

     overflow: hidden;
}

.fauna-banner .slick-track {
     margin: 0 !important;
     padding: 0 !important;
}

.fauna-banner .slick-slide {
     margin: 0 !important;
     padding: 0 !important;
}




/* =========================================================
   CONTENT WRAPPER
========================================================= */

.fauna-content-wrapper {
     width: 100%;
     max-width: 100%;

     margin: 0;
     padding: 35px 30px;

     background:
          linear-gradient(180deg,
               #f5f7fb 0%,
               #eef2f7 100%);
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.fauna-container {
     display: grid;

     grid-template-columns:
          minmax(260px, 300px) minmax(0, 1fr);

     gap: 30px;

     width: 100%;
     max-width: 1400px;

     margin: 0 auto;

     align-items: start;
}


/* =========================================================
   SIDEBAR CARD
========================================================= */

.fauna-sidebar {
     position: sticky;

     top: 25px;

     width: 100%;
     max-width: 300px;

     margin: 0;
     padding: 16px;

     align-self: start;

     background: rgba(255, 255, 255, .96);

     border: 1px solid #e1e6ee;
     border-radius: 18px;

     box-shadow:
          0 10px 30px rgba(20, 35, 60, .08);

     overflow: hidden;

     animation:
          faunaSidebarIn .7s ease both;

     transition:
          box-shadow .3s ease,
          transform .3s ease;
}


/* Sidebar hover */

.fauna-sidebar:hover {
     box-shadow:
          0 18px 40px rgba(20, 35, 60, .12);
}


/* =========================================================
   SIDEBAR ANIMATION
========================================================= */

@keyframes faunaSidebarIn {

     from {
          opacity: 0;
          transform: translateX(-25px);
     }

     to {
          opacity: 1;
          transform: translateX(0);
     }
}


/* =========================================================
   SIDEBAR NAV
========================================================= */

.fauna-sidebar .nav {
     width: 100%;

     margin: 0;
     padding: 0;
}


/* =========================================================
   SIDEBAR MENU
========================================================= */

.fauna-sidebar .menu {
     width: 100%;

     margin: 0;
     padding: 0;

     list-style: none;
}


/* =========================================================
   SIDEBAR MENU ITEM
========================================================= */

.fauna-sidebar .menu>li {
     position: relative;

     width: 100%;

     margin: 0;
     padding: 0;

     list-style: none;

     border-bottom: 1px solid #e8ecf2;
}

.fauna-sidebar .menu>li:last-child {
     border-bottom: 0;
}


/* =========================================================
   SIDEBAR LINK
========================================================= */

.fauna-sidebar .menu>li>a {
     position: relative;

     display: flex;

     width: 100%;
     min-height: 56px;

     align-items: center;

     margin: 0;
     padding: 14px 16px;

     color: #263449;

     background: transparent;

     border-radius: 10px;

     text-decoration: none;

     font-size: 15px;
     font-weight: 500;

     line-height: 1.45;

     overflow-wrap: break-word;

     transition:
          color .3s ease,
          background .3s ease,
          padding-left .3s ease,
          transform .3s ease,
          box-shadow .3s ease;
}


/* =========================================================
   SIDEBAR LINK HOVER
========================================================= */

.fauna-sidebar .menu>li>a:hover {
     color: #ffffff;

     background: #2a4173;

     padding-left: 23px;

     transform: translateX(3px);

     box-shadow:
          0 6px 18px rgba(54, 80, 138, .18);
}


/* =========================================================
   LEFT INDICATOR
========================================================= */

.fauna-sidebar .menu>li>a::before {
     content: "";

     position: absolute;

     left: 0;
     top: 50%;

     width: 3px;
     height: 0;

     border-radius: 5px;

     background: #f5b82e;

     transform: translateY(-50%);

     transition:
          height .3s ease;
}

.fauna-sidebar .menu>li>a:hover::before {
     height: 65%;
}


/* =========================================================
   ADVANCED SEARCH
========================================================= */

.fauna-sidebar .menu>li:first-child {
     margin-bottom: 10px;

     border-bottom: 0;
}

.fauna-sidebar .menu>li:first-child>a {
     min-height: 60px;

     color: #ffffff;

     background: #2a4173;

     font-weight: 700;

     border-radius: 11px;

     box-shadow:
          0 8px 20px rgba(54, 80, 138, .20);
}

.fauna-sidebar .menu>li:first-child>a::before {
     height: 60%;
}

.fauna-sidebar .menu>li:first-child>a:hover {
     background: #2d4476;

     transform: translateY(-2px);

     box-shadow:
          0 12px 25px rgba(54, 80, 138, .28);
}


/* =========================================================
   GAP BELOW ITEMS
========================================================= */

.fauna-sidebar .menu>li.gap_below {
     margin-bottom: 12px;

     border-bottom: 0;
}


/* =========================================================
   GET DJVU
========================================================= */

.fauna-sidebar .menu>li:last-child {
     margin-top: 10px;

     padding-top: 10px;

     border-top: 1px solid #dfe5ed;
}

.fauna-sidebar .menu>li:last-child>a {
     color: #2a4173;

     font-weight: 600;
}

.fauna-sidebar .menu>li:last-child>a:hover {
     color: #ffffff;
}


/* =========================================================
   ABOUT / MAIN CONTENT
========================================================= */

.fauna-container .about {
     width: 100%;
     min-width: 0;
     max-width: 100%;

     margin: 0;
     padding: 35px 40px;

     color: #273449;

     background: #ffffff;

     border: 1px solid #e1e6ee;
     border-radius: 18px;

     box-shadow:
          0 10px 30px rgba(20, 35, 60, .07);

     font-size: 16px;

     line-height: 1.85;

     overflow: hidden;

     animation:
          faunaContentIn .8s ease both;
}


/* =========================================================
   CONTENT ANIMATION
========================================================= */

@keyframes faunaContentIn {

     from {
          opacity: 0;
          transform: translateY(25px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}


/* =========================================================
   PAGE TITLE
========================================================= */

.about .page_title {
     position: relative;

     margin: 0 0 25px;

     padding: 16px 20px;

     color: #ffffff;

     background:
          linear-gradient(135deg,
               #2a4173,
               #4867a0);

     border-left: 6px solid #f5b82e;
     border-radius: 10px;

     font-size: 27px;
     font-weight: 700;

     line-height: 1.35;

     box-shadow:
          0 10px 25px rgba(54, 80, 138, .18);

     overflow: hidden;
}


/* =========================================================
   TITLE SHINE
========================================================= */

.about .page_title::after {
     content: "";

     position: absolute;

     top: 0;
     left: -100%;

     width: 60%;
     height: 100%;

     background:
          linear-gradient(90deg,
               transparent,
               rgba(255, 255, 255, .15),
               transparent);

     transform: skewX(-20deg);

     animation:
          faunaTitleShine 5s ease-in-out infinite;
}

@keyframes faunaTitleShine {

     0% {
          left: -100%;
     }

     35% {
          left: 130%;
     }

     100% {
          left: 130%;
     }
}


/* =========================================================
   ABOUT PARAGRAPHS
========================================================= */

.about p {
     margin: 0 0 22px;

     color: #3b4657;

     font-size: 16px;

     line-height: 1.85;

     text-align: justify;
}

.about p:last-child {
     margin-bottom: 0;
}


/* =========================================================
   BOLD SECTION TITLES
========================================================= */

.about .bld {
     color: #2a4173;

     font-size: 18px;
     font-weight: 700;

     transition:
          color .25s ease;
}

.about .bld:hover {
     color: #24385f;
}


/* =========================================================
   LISTS
========================================================= */

.about ul {
     margin: 10px 0 25px;

     padding-left: 30px;
}

.about ul li {
     margin-bottom: 10px;

     color: #3b4657;

     line-height: 1.7;
}

.about .lower_alpha {
     list-style-type: upper-alpha;
}


/* =========================================================
   CONTENT LINKS
========================================================= */

.about a {
     color: #2a4173;

     text-decoration: none;

     transition:
          color .25s ease;
}

.about a:hover {
     color: #f0a900;

     text-decoration: underline;
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

     .fauna-banner,
     .fauna-slide {
          height: 400px;
     }

     .fauna-container {
          grid-template-columns:
               250px minmax(0, 1fr);

          gap: 25px;
     }

     .fauna-sidebar {
          max-width: 250px;
     }

     .fauna-container .about {
          padding: 30px;
     }

     .about .page_title {
          font-size: 25px;
     }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

     .fauna-banner,
     .fauna-slide {
          height: 380px;
     }

     .fauna-container {
          grid-template-columns: 1fr;

          gap: 25px;
     }

     .fauna-sidebar {
          position: relative;

          top: auto;

          width: 100%;
          max-width: 100%;

          order: 1;
     }

     .fauna-container .about {
          order: 2;
     }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

     .fauna-banner,
     .fauna-slide {
          height: 300px;
     }

     .fauna-slide img {
          object-position: center center;
     }


     /* Caption */

     .slide-caption {
          left: 15px;
          right: 15px;
          bottom: 25px;

          max-width: none;

          padding: 9px 13px;

          font-size: 16px;

          border-left-width: 4px;

          border-radius: 0 7px 7px 0;
     }


     /* Arrows */

     .fauna-banner .slick-prev,
     .fauna-banner .slick-next {
          width: 38px;
          height: 38px;
     }

     .fauna-banner .slick-prev {
          left: 8px;
     }

     .fauna-banner .slick-next {
          right: 8px;
     }

     .fauna-banner .slick-prev::before,
     .fauna-banner .slick-next::before {
          font-size: 18px;
     }


     /* Dots */

     .fauna-banner .slick-dots {
          bottom: 8px;
     }


     /* Content */

     .fauna-content-wrapper {
          margin: 0;
          padding: 25px 15px;
     }


     /* Sidebar */

     .fauna-sidebar {
          padding: 12px;

          border-radius: 14px;
     }

     .fauna-sidebar .menu>li>a {
          min-height: 52px;

          padding: 13px 14px;

          font-size: 15px;
     }


     /* About */

     .fauna-container .about {
          padding: 25px 20px;

          border-radius: 14px;

          font-size: 15px;
     }

     .about .page_title {
          margin-bottom: 20px;

          padding: 14px 15px;

          font-size: 21px;
     }

     .about p {
          font-size: 15px;

          line-height: 1.75;

          text-align: left;
     }

     .about .bld {
          font-size: 16px;
     }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

     .fauna-banner,
     .fauna-slide {
          height: 270px;
     }

     .slide-caption {
          left: 12px;
          right: 12px;
          bottom: 20px;

          padding: 8px 11px;

          font-size: 14px;
     }

     .fauna-content-wrapper {
          padding: 20px 10px;
     }

     .fauna-container .about {
          padding: 20px 16px;
     }
}

/* =========================================================
   PURE JAVASCRIPT SLIDER
========================================================= */

.fauna-banner .single-item {
     position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
}

.fauna-banner .fauna-slide {
     position: absolute;
     top: 0;
     left: 0;

     width: 100%;
     height: 100%;

     display: none;
     opacity: 0;

     transition: opacity 0.8s ease;

     overflow: hidden;
}

.fauna-banner .fauna-slide:first-child {
     display: block;
     opacity: 1;
}

/* pause button  */