/* Modal style */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Black background */
            background-color: rgba(0,0,0,0.9); /* Black with opacity */
        }

        /* Modal Content */
        .modal-content {
            margin: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
            max-width: 90%;
            max-height: 80vh;
            object-fit: contain;
        }

        /* Modal Close Button */
        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }

        .closeSpecial {
            position: absolute;
            /*top: 15px;
            right: 35px;*/
            bottom: 3%; 
            left: 50%; 
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }

        .closeSpecial:hover,
        .closeSpecial:focus {
            color: #f44336;
            text-decoration: none;
            cursor: pointer;
        }

        /* Modal Close Button */
        .closeMobile {
            position: absolute;
            bottom: 24%; /* Adjust distance from bottom */
            left: 50%; /* Center horizontally */
            transform: translateX(-50%); /* Ensure true centering */
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }

        .closeMobile:hover,
        .closeMobile:focus {
            color: #f44336;
            text-decoration: none;
            cursor: pointer;
        }
        

        .close:hover,
        .close:focus {
            color: #f44336;
            text-decoration: none;
            cursor: pointer;
        }

        .highlight {
            background-color: yellow;
            font-weight: bold;
        }

        /* Floating Scroll to Top Button */
        #scrollToTopBtn {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: red;
            color: white;
            border: none;
            width: 50px; /* Make width and height the same */
            height: 50px;
            
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        #scrollToTopBtn:hover {
            background-color: darkred;
        }