body {
            margin: 0;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        }

        /* General Styling */
        .containerBig {
            display: grid;
            grid-template-columns: 1fr 3fr;
            gap: 20px;
            margin-right: 5vw;
        }

        .sidenav {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            max-width: 250px;
            background: #f4f4f4;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            margin-left: 25px;
            margin-top: 25px;
            height: 450px;
        }

        .sidenav a,
        .dropdown-btn {
            padding: 10px;
            text-decoration: none;
            font-size: 16px;
            color: #333;
            background: none;
            border: none;
            text-align: left;
            cursor: pointer;
            outline: none;
            width: 100%;
        }

        .sidenav a:hover,
        .dropdown-btn:hover {
            background-color: #ddd;
            color: #000;
        }

        .sidenav a.active,
        .dropdown-btn.active {
            background-color: #555;
            color: white;
        }

        .dropdown-link {
            color: inherit;
            /* Matches button text color */
            text-decoration: none;
            /* Removes underline */
            padding: 0;
            /* Prevents padding overlap */
            display: inline-block;
            /* Allows proper alignment */
        }

        .dropdown-link:hover {
            text-decoration: underline;
            /* Adds hover effect for clarity */
        }

        .dropdown-container {
            display: none;
            flex-direction: column;
            gap: 8px;
            padding-left: 20px;
        }

        .dropdown-btn.active+.dropdown-container {
            display: flex;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .containerBig {
                grid-template-columns: 1fr;
            }

            .sidenav {
                width: 100%;
            }
        }

        .content {
            max-width: 800px;
            /* Limit width for better readability */
            margin: 0;
            /* Center content horizontally */
            padding: 20px;
            /* Add general padding */
            text-align: center;
            /* Center-align text */
            line-height: 1.7;
        }

        /* Responsive Design for Mobile Screens */
        @media (max-width: 768px) {
            .content {
                padding: 15px;
                /* Reduce padding for smaller screens */
            }

            .content-image {
                max-height: 300px;
                /* Smaller image for better fit */
            }
        }

        @media (max-width: 480px) {
            .content {
                padding: 10px;
                /* Further reduce padding for mobile phones */
            }

            .content h1 {
                font-size: 1.8em;
                /* Slightly smaller heading size */
            }
        }

        /************/
        .pagetitle {
            font-family: 'Trebuchet MS', sans-serif;
            font-weight: 800;
            font-size: 2.5rem;
            /* Bigger font size */
            color: rgb(51, 51, 51);
            padding-left: 5vw;
            margin-top: 10px;
            margin-bottom: 0;
        }

        /* Main Content Styling */
        .card {
            width: 90%;
            /* Make cards take full width */
            margin-bottom: 3vw;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            flex: 0 1 calc(50% - 1rem);
            /* Each card takes 50% width minus gap */
            box-sizing: border-box;
            /* Include padding in width calculation */
        }

        .cards-container {
            display: flex;
            /* Use flexbox for layout */
            flex-wrap: wrap;
            /* Allow wrapping to new rows */
            gap: 1rem;
            /* Space between cards */
            justify-content: space-around;
            /* Adjust alignment */
        }

        .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }

        @media (max-width: 600px) {
            .card {
                flex: 0 1 100%;
                /* Cards take full width on small screens */
            }
        }

        .exams-section {
            background-color: rgb(0, 33, 71);
            color: white;
            padding: 15px;
            border-radius: 5px;
        }

        .exams-section h6 {
            padding-bottom: 5px;
        }

        .exams-section ul {
            list-style: disc;
            padding-left: 20px;
            text-align: left;
        }