/* FAUNA - ABOUT ZSI PAGE */

   .mainpage {
        width: 100%;
        max-width: 1400px;
        margin: 30px auto;
        padding: 0 20px;

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


   /* =========================================================
       LEFT SIDEBAR
    ========================================================= */

   .mainpage .fauna-sidebar {
        flex: 0 0 250px;
        width: 250px;

        position: sticky;
        top: 20px;

        background: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 6px;

        overflow: hidden;
   }

   .mainpage .fauna-sidebar ul {
        margin: 0;
        padding: 0;
        list-style: none;
   }

   .mainpage .fauna-sidebar li {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #ddd;
   }

   .mainpage .fauna-sidebar li:last-child {
        border-bottom: none;
   }

   .mainpage .fauna-sidebar a {
        display: block;

        padding: 11px 15px;

        color: #333;
        background: #fff;

        text-decoration: none;

        font-size: 14px;
        line-height: 1.4;

        transition: all 0.25s ease;
   }

   .mainpage .fauna-sidebar a:hover {
        background: #2a4173;
        color: #fff;
        padding-left: 20px;
   }


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

   .mainpage .about {
        flex: 1;
        min-width: 0;

        background: #fff;

        padding: 30px 35px;

        border: 1px solid #e2e2e2;
        border-radius: 8px;

        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
   }


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

   .mainpage .page_title {
        margin: 0 0 30px;

        padding-bottom: 15px;

        /* color: #2a4173; */

        font-size: 30px;
        font-weight: 700;
        line-height: 1.3;

        border-bottom: 3px solid #2a4173;

        position: relative;
   }

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

        position: absolute;
        left: 0;
        bottom: -3px;

        width: 80px;
        height: 3px;

        background: #2a4173;
   }


   /* =========================================================
       SECTION HEADINGS
    ========================================================= */

   .mainpage .about .h1 {
        margin-top: 30px;
        margin-bottom: 15px;

        color: #2a4173;

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

        line-height: 1.4;

        padding-left: 14px;

        border-left: 5px solid #2a4173;
   }


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

   .mainpage .about p {
        margin: 0 0 18px;

        color: #444;

        font-size: 15px;
        line-height: 1.8;

        text-align: justify;
   }


   /* =========================================================
       BOLD TEXT
    ========================================================= */

   .mainpage .about .bld {
        font-weight: 700;
        color: #222;
   }


   /* =========================================================
       ITALIC TEXT
    ========================================================= */

   .mainpage .about .itl {
        font-style: italic;
        color: #555;
   }


   /* =========================================================
       OBJECTIVES LIST
    ========================================================= */

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

        padding-left: 35px;

        color: #444;

        font-size: 15px;
        line-height: 1.8;

        list-style-type: lower-roman;
   }

   .mainpage .about ul.lower_roman li {
        margin-bottom: 7px;
        padding-left: 5px;
   }


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

   .mainpage .about a {
        color: #2a4173;
        font-weight: 600;
   }

   .mainpage .about a:hover {
        color: #2a4173;
        text-decoration: underline;
   }


   /* =========================================================
       RESPONSIVE - TABLET
    ========================================================= */

   @media (max-width: 992px) {

        .mainpage {
             gap: 20px;
             padding: 0 15px;
        }

        .mainpage .fauna-sidebar {
             flex: 0 0 210px;
             width: 210px;
        }

        .mainpage .about {
             padding: 25px;
        }

        .mainpage .page_title {
             font-size: 26px;
        }

        .mainpage .about .h1 {
             font-size: 20px;
        }

        .mainpage .about p {
             font-size: 14px;
             line-height: 1.7;
        }
   }


   /* =========================================================
       RESPONSIVE - MOBILE
    ========================================================= */

   @media (max-width: 768px) {

        .mainpage {
             display: block;
             width: 100%;
             margin: 20px auto;
             padding: 0 12px;
        }

        .mainpage .fauna-sidebar {
             position: relative;
             top: auto;

             width: 100%;
             margin-bottom: 20px;
        }

        .mainpage .about {
             width: 100%;
             padding: 20px 18px;
        }

        .mainpage .page_title {
             font-size: 23px;
             margin-bottom: 25px;
        }

        .mainpage .about .h1 {
             font-size: 19px;
             margin-top: 25px;
        }

        .mainpage .about p {
             font-size: 14px;
             line-height: 1.7;
             text-align: left;
        }

        .mainpage .about ul.lower_roman {
             padding-left: 28px;
             font-size: 14px;
        }
   }


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

   @media (max-width: 480px) {

        .mainpage {
             padding: 0 8px;
        }

        .mainpage .about {
             padding: 16px;
        }

        .mainpage .page_title {
             font-size: 21px;
        }

        .mainpage .about .h1 {
             font-size: 18px;
        }

        .mainpage .about p {
             font-size: 13px;
             line-height: 1.65;
        }

        .mainpage .fauna-sidebar a {
             font-size: 13px;
             padding: 10px 12px;
        }
   }


   /* about library */
   :root {
        --fauna-blue: #2a4173;
        --fauna-blue-dark: #293d6b;
        --fauna-blue-light: #eef2f8;
        --fauna-border: #d9dee8;
        --fauna-text: #444;
        --fauna-white: #ffffff;
   }


   /* =========================================================
   MAIN PAGE LAYOUT
========================================================= */

   .mainpage {
        width: 100%;
        max-width: 1400px;

        margin: 30px auto;
        padding: 0 20px;

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


   /* =========================================================
   LEFT SIDEBAR
========================================================= */

   .mainpage .fauna-sidebar {
        flex: 0 0 250px;
        width: 250px;

        position: sticky;
        top: 20px;

        background: #f5f6f8;

        border: 1px solid var(--fauna-border);
        border-radius: 6px;

        overflow: hidden;
   }


   /* Sidebar UL */

   .mainpage .fauna-sidebar ul {
        margin: 0;
        padding: 0;

        list-style: none;
   }


   /* Sidebar LI */

   .mainpage .fauna-sidebar li {
        margin: 0;
        padding: 0;

        border-bottom: 1px solid var(--fauna-border);
   }

   .mainpage .fauna-sidebar li:last-child {
        border-bottom: none;
   }


   /* Sidebar Links */

   .mainpage .fauna-sidebar a {
        display: block;

        padding: 11px 15px;

        color: #333;
        background: #fff;

        text-decoration: none;

        font-size: 14px;
        line-height: 1.45;

        transition: all 0.25s ease;
   }


   /* Sidebar Hover */

   .mainpage .fauna-sidebar a:hover {
        background: var(--fauna-blue);
        color: #fff;

        padding-left: 20px;
   }


   /* Active Sidebar Link */

   .mainpage .fauna-sidebar a.active {
        background: var(--fauna-blue);
        color: #fff;
   }


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

   .mainpage .about {
        flex: 1;
        min-width: 0;

        background: var(--fauna-white);

        padding: 30px 35px;

        border: 1px solid var(--fauna-border);
        border-radius: 8px;

        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
   }


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

   .mainpage .page_title {
        margin: 0 0 30px;

        padding-bottom: 15px;

        /* color: var(--fauna-blue); */

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

        line-height: 1.3;

        border-bottom: 3px solid var(--fauna-blue);

        position: relative;
   }


   /* Small title indicator */

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

        position: absolute;

        left: 0;
        bottom: -3px;

        width: 80px;
        height: 3px;

        background: var(--fauna-blue-dark);
   }


   /* =========================================================
   SECTION HEADINGS
========================================================= */

   .mainpage .about .h1 {
        margin-top: 30px;
        margin-bottom: 16px;

        padding: 10px 15px;

        color: var(--fauna-blue);

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

        line-height: 1.4;

        background: var(--fauna-blue-light);

        border-left: 5px solid var(--fauna-blue);

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


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

   .mainpage .about p {
        margin: 0 0 18px;

        color: var(--fauna-text);

        font-size: 15px;
        line-height: 1.8;

        text-align: justify;
   }


   /* =========================================================
   BOLD TEXT
========================================================= */

   .mainpage .about .bld {
        color: var(--fauna-blue);

        font-weight: 700;
   }


   /* =========================================================
   ITALIC TEXT
========================================================= */

   .mainpage .about .itl {
        color: #555;

        font-style: italic;
   }


   /* =========================================================
   ROMAN LIST
========================================================= */

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

        padding-left: 35px;

        color: var(--fauna-text);

        font-size: 15px;
        line-height: 1.8;

        list-style-type: lower-roman;
   }


   /* =========================================================
   ALPHABETICAL LIST
========================================================= */

   .mainpage .about ol.lower_alpha,
   .mainpage .about ul.lower_alpha {
        margin: 8px 0 15px;

        padding-left: 30px;

        color: var(--fauna-text);

        font-size: 15px;
        line-height: 1.8;

        list-style-type: lower-alpha;
   }


   /* =========================================================
   DECIMAL LIST
========================================================= */

   .mainpage .about ol.decimal {
        margin: 10px 0 25px;

        padding-left: 35px;

        color: var(--fauna-text);

        font-size: 15px;
        line-height: 1.8;

        list-style-type: decimal;
   }


   /* =========================================================
   DOT LIST
========================================================= */

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

        padding-left: 30px;

        color: var(--fauna-text);

        font-size: 15px;
        line-height: 1.8;

        list-style-type: disc;
   }


   /* =========================================================
   LIST ITEMS
========================================================= */

   .mainpage .about li {
        margin-bottom: 8px;
        padding-left: 5px;
   }


   /* Nested lists */

   .mainpage .about li>ul,
   .mainpage .about li>ol {
        margin-top: 8px;
   }


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

   .mainpage .about a {
        color: var(--fauna-blue);

        font-weight: 600;

        text-decoration: none;

        transition: color 0.2s ease;
   }


   .mainpage .about a:hover {
        color: var(--fauna-blue-dark);

        text-decoration: underline;
   }


   /* =========================================================
   TEXT SELECTION / EMPHASIS
========================================================= */

   .mainpage .about strong {
        color: var(--fauna-blue);
   }


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

   @media (max-width: 992px) {

        .mainpage {
             gap: 20px;

             padding: 0 15px;
        }


        .mainpage .fauna-sidebar {
             flex: 0 0 210px;

             width: 210px;
        }


        .mainpage .about {
             padding: 25px;
        }


        .mainpage .page_title {
             font-size: 26px;
        }


        .mainpage .about .h1 {
             font-size: 20px;
        }


        .mainpage .about p,
        .mainpage .about ul,
        .mainpage .about ol {
             font-size: 14px;

             line-height: 1.7;
        }
   }


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

   @media (max-width: 768px) {

        .mainpage {
             display: block;

             width: 100%;

             margin: 20px auto;

             padding: 0 12px;
        }


        /* Sidebar */

        .mainpage .fauna-sidebar {
             position: relative;

             top: auto;

             width: 100%;

             margin-bottom: 20px;
        }


        /* Content */

        .mainpage .about {
             width: 100%;

             padding: 20px 18px;
        }


        .mainpage .page_title {
             font-size: 23px;

             margin-bottom: 25px;
        }


        .mainpage .about .h1 {
             font-size: 19px;

             margin-top: 25px;

             padding: 9px 12px;
        }


        .mainpage .about p {
             font-size: 14px;

             line-height: 1.7;

             text-align: left;
        }


        .mainpage .about ul.lower_roman,
        .mainpage .about ul.lower_alpha,
        .mainpage .about ul.dot,
        .mainpage .about ol.lower_alpha,
        .mainpage .about ol.decimal {
             padding-left: 28px;

             font-size: 14px;

             line-height: 1.7;
        }
   }


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

   @media (max-width: 480px) {

        .mainpage {
             padding: 0 8px;
        }


        .mainpage .about {
             padding: 16px;
        }


        .mainpage .page_title {
             font-size: 21px;

             margin-bottom: 20px;
        }


        .mainpage .about .h1 {
             font-size: 18px;

             margin-top: 22px;
        }


        .mainpage .about p {
             font-size: 13px;

             line-height: 1.65;
        }


        .mainpage .about ul.lower_roman,
        .mainpage .about ul.lower_alpha,
        .mainpage .about ul.dot,
        .mainpage .about ol.lower_alpha,
        .mainpage .about ol.decimal {
             padding-left: 25px;

             font-size: 13px;

             line-height: 1.65;
        }


        .mainpage .fauna-sidebar a {
             font-size: 13px;

             padding: 10px 12px;
        }
   }