/* Transition the background when toggling from dark to light mode */
        body {
            transition: .5s;
        }


        /**
         * Header styling
         */

        /* Logo resize on smaller screens */
        .logo {
            height: 30px;
            width: auto;
        }

        @media (min-width: 576px) {
            .logo {
                height: 40px;
            }
        }


        /**
         * Footer styling
         */

        .footer {
            background-color: var(--bs-dark);
        }




        /**
         * Main section styling
         */

        /* Grid items and overlay */
        .grid-item {
            min-height: 190px;
        }
        
        .large-item {
            min-height: 400px;
        }
        
        .overlay-text {
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .small-text {
            font-size: 0.75rem;
        }





        /**
        * Dark Mode overrides
        */
        /* Hide the default Bootstrap checkbox visually */
        .form-check-input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            pointer-events: none;
            /* Ensure it's not clickable directly */
        }

        /* Style the label to act as the custom switch */
        .custom-switch-label {
            position: relative;
            display: inline-block;
            width: 60px;
            /* Width of the switch track */
            height: 34px;
            /* Height of the switch track */
            background-color: var(--bs-secondary);
            /* Default track color (e.g., light gray) */
            border-radius: 34px;
            /* Rounded corners for the track */
            cursor: pointer;
            transition: background-color 0.3s ease;
            overflow: hidden;
            /* Hide anything outside the track */
        }

        /* Custom thumb (::after pseudo-element of the label) */
        .custom-switch-label::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 30px;
            /* Size of the thumb */
            height: 30px;
            /* Size of the thumb */
            background-color: var(--bs-light);
            /* Thumb color */
            border-radius: 50%;
            /* Make thumb round */
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

        /* Sun Icon (::before pseudo-element of the label) */
        .custom-switch-label::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 7px;
            /* Position on the left side of the track */
            transform: translateY(-50%);
            width: 20px;
            /* Size of the icon */
            height: 20px;
            /* Size of the icon */
            /* Changed SVG fill and stroke to white so we can invert it with CSS filter */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2.25V4.5M12 19.5V21.75M4.5 12H2.25M21.75 12H19.5M18.364 5.636L16.75 7.25M7.25 16.75L5.636 18.364M18.364 18.364L16.75 16.75M7.25 7.25L5.636 5.636M12 15.75C13.933 15.75 15.75 13.933 15.75 12C15.75 10.067 13.933 8.25 12 8.25C10.067 8.25 8.25 10.067 8.25 12C8.25 13.933 10.067 15.75 12 15.75Z' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            opacity: 0.8;
            /* Make it slightly transparent when visible */
            transition: opacity 0.3s ease, filter 0.3s ease;
            /* Added filter to transition */
            z-index: 1;
            /* Ensure it's behind the thumb but above the track */
            filter: invert(1);
            /* Invert white SVG to black for light mode */
        }

        /* Moon Icon */
        .moon-icon {
            position: absolute;
            top: 50%;
            right: 6px;
            /* Position on the right side of the track */
            transform: translateY(-50%);
            width: 20px;
            /* Size of the icon */
            height: 20px;
            /* Size of the icon */
            /* Moon SVG is already white, so no change needed here */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            opacity: 0;
            /* Hidden by default */
            transition: opacity 0.3s ease, filter 0.3s ease;
            /* Added filter to transition */
            z-index: 1;
            /* Ensure it's behind the thumb but above the track */
            filter: invert(0);
            /* Keep white SVG white for dark mode (no inversion) */
        }


        /* --- When the checkbox is checked (Dark Mode) --- */
        .form-check-input:checked+.custom-switch-label {
            background-color: var(--bs-primary);
            /* Darker track color when checked */
        }

        .form-check-input:checked+.custom-switch-label::after {
            transform: translateX(26px);
            /* Move thumb to the right */
            background-color: var(--bs-dark);
            /* Darker thumb color */
        }

        .form-check-input:checked+.custom-switch-label::before {
            opacity: 0;
            /* Hide sun icon when checked */
            /* No filter needed as it's hidden */
        }

        .form-check-input:checked+.custom-switch-label .moon-icon {
            opacity: 0.8;
            /* Show moon icon when checked */
            /* No filter needed as it's already white */
        }