/* Google Font Import - Poppins */
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        :root {
            /* ===== Colors ===== */
            --body-color: #E4E9F7;
            --sidebar-color: #FFF;
            --primary-color: #007bff;
            --primary-color-light: #F6F5FF;
            --toggle-color: #DDD;
            --text-color: #707070;

            /* ====== Transition ====== */
            --tran-03: all 0.2s ease;
            --tran-03: all 0.3s ease;
            --tran-04: all 0.3s ease;
            --tran-05: all 0.3s ease;
        }

        .cat_body {
            overflow-x: clip;
            min-height: 100vh;
            transition: var(--tran-05);
            background: #f5f5f5;
        }

        ::selection {
            background-color: var(--primary-color);
            color: #fff;
        }

        .cat_body .dark {
            --body-color: #18191a;
            --sidebar-color: #242526;
            --primary-color: #3a3b3c;
            --primary-color-light: #3a3b3c;
            --toggle-color: #fff;
            --text-color: #ccc;
        }

        /* ===== Sidebar ===== */
        .sidebar {
            position: relative;
            box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
            /* border-right: 2px solid #b5b5b5; */
            top: 0;
            left: 0;
            /* height: 100%; */
            width: 20%;
            border-radius: 28px;
            padding: 10px 14px;
            background: var(--sidebar-color);
            transition: var(--tran-05);

        }

        /* ===== Reusable code - Here ===== */
        .sidebar li {
            height: 50px;
            list-style: none;
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        .sidebar header .image,
        .sidebar .icon {
            min-width: 60px;
            border-radius: 6px;
        }

        .sidebar .text,
        .sidebar .icon {
            color: var(--text-color);
            transition: var(--tran-03);
        }

        .sidebar .text {
            font-size: 17px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 1;
            color: black;
        }

        /* =========================== */

        .sidebar header {
            position: relative;
        }

        .sidebar header .image-text {
            display: flex;
            align-items: center;
        }

        .sidebar header .logo-text {
            display: flex;
            flex-direction: column;
        }

        header .image-text .name {
            margin-top: 2px;
            font-size: 18px;
            font-weight: 600;
        }

        header .image-text .profession {
            font-size: 16px;
            margin-top: -2px;
            display: block;
        }

        .sidebar header .image {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sidebar header .image img {
            width: 40px;
            border-radius: 6px;
        }

        .sidebar header .toggle {
            position: absolute;
            top: 50%;
            right: -25px;
            transform: translateY(-50%) rotate(180deg);
            height: 25px;
            width: 25px;
            background-color: var(--primary-color);
            color: var(--sidebar-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            cursor: pointer;
            transition: var(--tran-05);
        }

        body.dark .sidebar header .toggle {
            color: var(--text-color);
        }

        .sidebar .menu {
            margin-top: 10px;
        }

        .sidebar .menu h3 {
            font-size: 22px;
            text-align: center;
            color: black;
            margin-bottom: 20px;
        }

        .sidebar li.search-box {
            border-radius: 6px;
            background-color: var(--primary-color-light);
            cursor: pointer;
            transition: var(--tran-05);
        }

        .sidebar li.search-box input {
            height: 100%;
            width: 100%;
            outline: none;
            border: none;
            background-color: var(--primary-color-light);
            color: var(--text-color);
            border-radius: 6px;
            font-size: 17px;
            font-weight: 500;
            transition: var(--tran-05);
        }

        .sidebar li a {
            list-style: none;
            height: 100%;
            background-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
            border-radius: 6px;
            text-decoration: none;
            transition: var(--tran-03);
        }

        .sidebar li a:hover {
            background-color: var(--primary-color);
        }

        .sidebar li a:hover .icon,
        .sidebar li a:hover .text {
            color: var(--sidebar-color);
        }

        body.dark .sidebar li a:hover .icon,
        body.dark .sidebar li a:hover .text {
            color: var(--text-color);
        }

        .sidebar .menu_bar {
            height: calc(100% - 55px);
            width: 100%;
            overflow-y: scroll;
        }

        .menu_bar::-webkit-scrollbar {
            display: none;
        }

        .sidebar .menu_bar .mode {
            border-radius: 6px;
            background-color: var(--primary-color-light);
            position: relative;
            transition: var(--tran-05);
        }

        .homebody {
            display: flex;
            margin-top: 100px;
            align-items: center;
            margin: auto;
            flex-direction: column;
            justify-content: center;
            width: calc(100% - 100px);
            transition: var(--tran-05);
        }

        .homebody .text {
            font-size: 30px;
            font-weight: 500;
            color: var(--text-color);
            padding: 12px 60px;
        }

        body.dark .homebody .text {
            color: var(--text-color);
        }

        .close{
            position: relative;
        }

        @media screen and (min-width: 769px) and (max-width: 1700px) {
            .sidebar .close-btn {
                display: none;
            }

            .toggle_btn {
                display: none;
            }
        }

        /* tabs */
        .container1 {
            margin: 15px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }

        /* Style for the tabs */

        .tabs {
            width: 90%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        @media screen and (max-width: 425px) {
            .tabs {
                width: 99%;
            }
        }

        @media screen and (min-width:769px) and (max-width:970px) {
            .sidebar {
                width: 200px;
            }

            .tabs {
                width: 97%;
            }

            .homebody {
                left: 230px;
            }
        }

        .tab {
            width: 50%;
            text-align: center;
            display: inline-block;
            padding: 15px 20px;
            background-color: #c1c4db;
            cursor: pointer;
            font-weight: 500;
            color: black;
            margin: 3px;
            border-radius: 40px;
        }

        /* Style for the active tab */
        .active-tab {
            background-color: #007bff;
            color: #fff;
        }

        /* Style for the tab content */
        .tab-content {
            display: none;
        }

        /* Show the content of the active tab */
        .active-content {
            display: block;
        }

        /* new cards */

        .main-container {
            padding: 30px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        /* HEADING */

        .heading {
            text-align: center;
        }

        .heading__title {
            font-weight: 600;
        }

        .heading__credits {
            margin: 10px 0px;
            color: #888888;
            font-size: 25px;
            transition: all 0.5s;
        }

        .heading__link {
            text-decoration: none;
        }

        .heading__credits .heading__link {
            color: inherit;
        }

        /* CARDS */

        .cards {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .card {
            margin: 20px;
            padding: 20px;
            width: 430px;
            min-height: 140px;
            max-height: 160px;
            border-radius: 10px;
            box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
            transition: all 0.2s;
        }

        @media screen and (min-width: 768px) and (max-width: 1190px) {

            .card {
                width: 500px;
            }

        }

        .card:hover {
            box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
            transform: scale(1.01);
        }

        .card__link,
        .card__exit,
        .card__icon {
            position: relative;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.9);
        }

        .card__link::after {
            position: absolute;
            top: 25px;
            left: 0;
            content: "";
            width: 0%;
            height: 3px;
            background-color: rgba(255, 255, 255, 0.6);
            transition: all 0.5s;
        }

        .card__link:hover::after {
            width: 100%;
        }

        .card__exit {
            grid-row: 1/2;
            justify-self: end;
        }

        .card__icon {
            grid-row: 2/3;
            font-size: 30px;
        }

        .card__title {
            font-size: 18px;
            font-weight: 550;
            color: #292a77;
            padding-left: 10px;
        }

        .card_des {
            font-size: 15px;
            margin-top: 10px;
            color: black;
        }

        /* CARD BACKGROUNDS */

        .card-3 {
            background: #fff;
        }

        .toggle_btn {
            background: #007bff;
            border: none;
            padding: 6px 10px;
            margin-top: 20px;
            border-radius: 5px;
            color: white;
        }

        .toggle_btn:hover {
            background: #4298f3;
            color: black;
        }

        /* RESPONSIVE */

        @media screen and (max-width: 425px) {
            .card {
                width: 310px;
                margin: 10px;
                max-height: max-content;
            }

            .main-container {
                justify-content: space-evenly;
                padding: 10px;
            }
        }

        @media (max-width: 1600px) {
            .cards {
                justify-content: center;
            }
        }

        /* CSS for the pre-loader */
        .preloader {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
        }

        .loader {
            position: absolute;
            top: 50%;
            left: 50%;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        /* Styling for active tab */
        .nav_link.active {
            background-color: #007bff;
            border-radius: 5px;
            border: none;
            padding: 0px 40px;
        }

        /* Text color for active tab */
        .nav_link.active .nav-text {
            color: white;
        }

        .main_div {
            margin-top: 100px;
        }

        .tab_main {
            width: 75%;
        }

        @media screen and (max-width: 425px) {
            .select_menu {
            display: block;
            width: 300px;
            margin-bottom: 30px;
        }
        }

        @media screen and (max-width:950px) {
            .tab_main {
                width: 100%;
            }

            .homebody{
                width: 100%;
            }

            .sidebar {
                display: none;
            }

            @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');

        .select_menu {
            display: block;
            width: 300px;
            margin-bottom: 30px;
        }

        .select_menu .select_btn {
            display: flex;
            height: 55px;
            background: #007bff;
            color: #fff;
            padding: 20px;
            font-size: 18px;
            font-weight: 400;
            border-radius: 8px;
            align-items: center;
            cursor: pointer;
            justify-content: space-between;
            box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
        }

        .select_btn i {
            font-size: 25px;
            transition: 0.3s;
        }

        .select_menu.active .select_btn i {
            transform: rotate(-180deg);
        }

        .select_menu .options_list {
            position: relative;
            padding: 20px;
            margin-top: 10px;
            border-radius: 8px;
            background: #fff;
            box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
            display: none;
        }

        .select_menu.active .options_list {
            display: block;
        }

        .options_list .option_li {
            display: flex;
            height: 55px;
            cursor: pointer;
            padding: 0 16px;
            border-radius: 8px;
            color: black;
            align-items: center;
            background: #fff;
        }

        .options_list .option_li:hover {
            background: #e4e4e4;
        }

        .option_li i {
            font-size: 25px;
            margin-right: 12px;
        }

        .option_li .option_text {
            font-size: 18px;
            color: black;
        }
        }

        .main_nav_link {
            margin-top: 40px;
        }

        .no_project {
            text-align: center;
            color: black;
        }

        .no_project p {
            color: black;
            font-size: 24px;
            font-weight: 600;
        }

        .main_body_div {
            display: flex;
            justify-content: center;
            margin-bottom: 125px;
        }

        .no_project_image {
            width: 95%;
        }

        @media screen and (min-width: 951px) and (max-width: 1700px) {
            .select_menu{
            display: none;
        }
        }