.search_container {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .search_bar {
            width: 90%;
            border: 1px solid #FF4912;
            background-color: white;
            border-radius: 3rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #FF4912;
        }

        .search_input {

            font-size: 1.5rem;
            text-align: center;
            color: gray;
            width: 100%;
            border: unset;
            background: unset;
            outline: unset;
            text-align: center;
        }

        .search_input:active {
            border: unset;
            background: unset;
            outline: unset;

        }

        .search_input:hover {
            border: unset;
            background: unset;
            outline: unset;

        }

        .search_icon {
            padding-left: 1rem;
            padding-top: .4rem;
            font-size: 1.5rem;
            width: 15%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .search_btn {
            font-size: 1.5rem;
            background-color: #FF4912;
            color: white;
            border: 3px solid white;
            border-radius: 3rem;
            padding: .2rem 1rem;
        }

        .hero_svg {
            width: 50%;
            margin: 2rem;
        }

        .title1 {
            font-size: 2.2rem;
        }

        /* hero destop veiw  */
        @media only screen and (min-width: 992px) {
            .title1 {
                font-size: 3rem;
            }

            .hero_svg {
                width: 15rem;
                margin: 2rem;
            }

            .search_bar {
                width: 50%;

            }

            .search_icon {
                width: 5%;
                align-items: start;

            }
        }

        .filter_container {
            width: fit-content;
            border: #FF4912 1px solid;
            color: #FF4912;
            font-size: 1.2rem;
            border-radius: 3rem;
            padding: .2rem 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 1rem auto;

            & i {
                font-size: 1.5rem;
                margin-right: 2rem;
            }
        }

        .filter_category {
            width: 25%;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 2rem auto;

            p {
                margin: unset;
                font-size: .8rem;
                text-align: center;
            }
        }

        .filter_category_img {
            width: 50%;
        }

        /* hero destop veiw  */
        @media only screen and (min-width: 992px) {
            .filter_category {

                p {

                    font-size: 1.2rem;

                }
            }

            .filter_container {

                display: none;

            }
        }

        .library_container {
            width: 90%;
            min-height: 100vh;
            margin: .5rem auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .book {
            width: 8rem;
            min-height: 17rem;

            margin-top: 1rem;
            margin-bottom: 1rem;


        }

        .book_cover {
            height: 12.5rem;
            width: 100%;
            overflow: hidden;
            border-radius: 10px;
            border: #0D0D0D 1px solid;
            background-size: cover;
            background-position: center;
            display: inline-block;
            transition: transform .8s ease, box-shadow 0.8s ease;
        }

        .book_description {
            margin-top: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: black;
        }

        .book_title {
            font-weight: 600;
            text-align: center;
            font-size: .8rem;
        }

        .book_author {
            font-weight: 200;
            text-align: center;
            font-size: .6rem;

        }

        .pdf_book_con {
            background-color: rgba(255, 255, 255, 0.281);
            backdrop-filter: blur(15px);
            transform: translate(-50%);
            z-index: 10;
        }

        .prev_book_cover {
            width: 100%;
            height: 70vh;
            background-size: cover;
            background-position: center;
            border-radius: 10px;
        }

        .modal-footer {
            justify-content: space-around;
        }

        .btn-primary {
            background-color: white;
            color: #FF4912;
            border: 1px dashed #FF4912;
        }

        .btn-primary:focus,
        .btn-primary:hover,
        .btn-primary:active {
            background-color: #FF4912;
            color: white;
            border: black;
            outline: black;
            --bs-btn-active-color: white;
            --bs-btn-active-bg: black;
            --bs-btn-active-border-color: black;
        }

        #book-description {
            display: flex;
            flex-direction: column;
            align-items: right;
            justify-content: start;
            margin: 0;
            margin-top: 1rem;
            font-size: 12px;
            font-family: 'ubuntu', Arial, Helvetica, sans-serif;
            text-align: justify;
            padding: 0 10px;
            height: 66px;
            overflow: hidden;
            position: relative;
            text-align: center;

            b {
                text-align: right;
            }

        }

        #white-faith {

            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 66px;
            background: black;
            background: linear-gradient(0deg, rgba(255, 255, 255, 0.8689600840336135) 0%, rgba(255, 255, 255, 0.6728816526610644) 32%, rgba(255, 255, 255, 0) 100%);

        }

        #pdf-reader {
            max-width: 100%;
            margin: 0 auto;
            overflow: hidden;
        }

        #pdf-canvas {
            display: block;
            margin: 0 auto;
            width: 100%;
            background: #fff;
        }

        #controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 10px;
        }

        #page-num {
            width: 50px;
            text-align: center;
            margin: 0 3px;
            background: white;
            color: #FF4912;
            height: 30px;
            border: #FF4912 1px solid;

        }

        #book-selector {
            display: block;
            margin: 20px auto;
        }

        #download-link {
            display: block;
            margin: 10px 0;
            text-align: center;
        }

        #page-count {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            text-align: center;
            border: none;
            background: #FF4912;
            color: white;
            height: 30px;
        }

        #next-page,
        #prev-page {
            padding: 0;
            margin: 0;
            width: fit-content;
            height: fit-content;
            background: transparent;
            border: unset;

            & i {
                font-size: 30px;
            }

        }

        @media only screen and (min-width: 992px) {
            .book_title {
                font-weight: 600;
                text-align: center;
                font-size: .8rem;
            }

            .book_author {
                font-weight: 400;
                text-align: center;
                font-size: 1rem;

            }

        }

        .loader_book {
            display: inline-block;

            margin: auto;
            width: 200px;
            height: 140px;
            background: #979794;
            box-sizing: border-box;
            position: relative;
            border-radius: 8px;
            perspective: 1000px;
        }

        .loader_book:before {
            content: '';
            position: absolute;
            left: 10px;
            right: 10px;
            top: 10px;
            bottom: 10px;
            border-radius: 8px;
            background: #f5f5f5 no-repeat;
            background-size: 60px 10px;
            background-image: linear-gradient(#ddd 100px, transparent 0),
                linear-gradient(#ddd 100px, transparent 0),
                linear-gradient(#ddd 100px, transparent 0),
                linear-gradient(#ddd 100px, transparent 0),
                linear-gradient(#ddd 100px, transparent 0),
                linear-gradient(#ddd 100px, transparent 0);

            background-position: 15px 30px, 15px 60px, 15px 90px,
                105px 30px, 105px 60px, 105px 90px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
        }

        .loader_book:after {
            content: '';
            position: absolute;
            width: calc(50% - 10px);
            right: 10px;
            top: 10px;
            bottom: 10px;
            border-radius: 8px;
            background: #fff no-repeat;
            background-size: 60px 10px;
            background-image: linear-gradient(#ddd 100px, transparent 0),
                linear-gradient(#ddd 100px, transparent 0),
                linear-gradient(#ddd 100px, transparent 0);
            background-position: 50% 30px, 50% 60px, 50% 90px;
            transform: rotateY(0deg);
            transform-origin: left center;
            animation: paging 1s linear infinite;
        }


        @keyframes paging {
            to {
                transform: rotateY(-180deg);
            }
        }

        .filter_side_bar {
            display: none;
        }

        .img_container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .hide_on_mobile {
            display: none !important;
        }

        .hide_this_too {
            display: none;
        }

        @media only screen and (min-width: 992px) {
            html {
                overflow-y: hidden !important;
            }

            main {
                display: flex;
                flex-direction: row;

            }

            .nav_bar {
                height: 10vh;
                align-items: center;

                img {
                    height: 100%;
                }

            }

            .filter_side_bar {
                display: block;
                width: 30vw;
                border-right: #FF4912 solid 1px;
                border-radius: 6px;
                height: 86vh;

            }

            .form-control {
                font-size: .8rem !important;
            }

            .body_content {
                width: 70vw;
                height: 90vh;
                overflow-y: scroll;
            }

            .title1 {
                font-size: 2rem;
            }

            .hide_on_desktop {
                display: none !important;
            }

            .hero_svg {
                width: 10vw;
            }

            .img_container {
                width: fit-content;
                display: none;
            }

            .search_container {
                height: 2.5rem;
                width: 90%;
            }

            .search_bar {
                width: 100%;
            }

            .search_input {
                width: 90%;
                font-size: 1rem;
            }

            .search_btn {
                display: none;
            }

            .hero {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-evenly;

            }

            .book {
                width: 8rem;
                margin: 1rem 2rem;
            }

            .book_cover {
                height: 13rem;
                width: 8rem;
                transition: transform 0.5s ease, box-shadow 0.8s ease;
            }

            .menu-item {
                border: unset;
                text-decoration: underline;
            }

            .modal-body1::-webkit-scrollbar {
                width: 12px;

            }

            .modal-body1 {
                padding: 1rem;
                max-height: 86vh;
            }

            .hide_this_too {
                display: block;
            }

            .show_on_desktop {
                display: flex !important;
            }

            .desktop_search {
                width: 100% !important;
                display: flex !important;
                margin-bottom: 1rem;

            }

            .menu-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 3.5rem;

                i {
                    display: flex;
                }
            }

            #pdf-canvas {
                height: auto;
                max-height: 95vh;
                width: 100%;
            }

            .modal-dialog {
                max-width: fit-content;
                margin: unset;
                margin: auto;
            }

            #book-description {
                width: 30vw;
                height: fit-content !important;
            }

            #white-faith {
                display: none;
            }

            #description_btn {
                display: none;
            }

            .library_container {

                min-height: 100vh;

            }

            .circle {
                position: absolute;
                border: solid 3px #f9322c80;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                z-index: -1;
                background-image: url('../ressources/images/alnour-icon.png');
                /* Add your logo image */
                background-size: 85%;
                background-repeat: no-repeat;
                background-position: center;
                opacity: .5;
            }
        }

        .hovered {
            transform: scale(1.1);
            /* Scale the hovered book by 1.2 */
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
            /* Apply shadow effect */
            cursor: pointer;
        }

        .book_cover:hover {
            transform: scale(1.1);
            /* Scale the hovered book by 1.2 */
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            /* Apply shadow effect */
            cursor: pointer;
        }

        .menu_btn {
            display: flex;
            font-size: 4rem;
            justify-content: center;
            align-items: center;
            transition: transform 0.3s ease, box-shadow 0.8s ease;
        }

        .menu_btn:hover {
            cursor: pointer;
            transform: scale(1.1);
            /* Scale the hovered book by 1.2 */
        }

        /* Style for the full-screen button */
        .fullscreen-btn {
            position: absolute;
            bottom: 1rem;
            right: 1rem;
            z-index: 10;
            /* Ensure the button is on top of other elements */
            background-color: transparent;
            /* Semi-transparent background */
            border: none;
            border-radius: 5px;
            padding: 10px;
            color: #f9322c;
            font-size: 2rem;
            cursor: pointer;

            width: 2.5rem;
            background-color: white;
            font-size: 1.5rem;
            height: 2.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .fullscreen-btn:hover {
            background-color: #f9322c50;
            color: white;
        }

        /* Ensure the button remains visible and fixed in full-screen mode */
        canvas:fullscreen~.fullscreen-btn,
        canvas:-webkit-full-screen~.fullscreen-btn,
        canvas:-moz-full-screen~.fullscreen-btn,
        canvas:-ms-fullscreen~.fullscreen-btn {
            position: fixed;
            bottom: 10px;
            left: 10px;
            z-index: 9999;
            /* Make sure it's on top of everything */
        }