body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #ffffff;
            background-size: cover;
            background-attachment: fixed;
			transition: background-color 0.3s, color 0.3s;
        }
		body.dark-mode {
            background-color: #000000;
            color: #ffffff;
        }
       .navbar {
			background-color: #007BFF;
			overflow: hidden;
			display: flex;
			align-items: center;  /* Align items vertically */
			justify-content: space-between;
			padding: 5px 20px;
		}
        .navbar .logo {
            margin-left: auto; /* Push the logo to the right */
        }
        .navbar a {
            color: white;
            padding: 14px 20px;
            text-decoration: none;
        }
        .navbar a:hover {
            background-color: #0056b3;
        }
        .navbar img {
            height: 50px;
            width: auto; /* Maintain aspect ratio */
        }
        .logo {
            display: flex;
            align-items: center;
        }
        .content {
            padding-left: 15px; /* Add left padding only to the content */
			padding-right: 10px;
        }
        h2 {
            color: #333;
            margin-top: 20px; /* Optional: Add some top margin for headings */
			transition: background-color 0.3s, color 0.3s;
        }
		body.dark-mode h2 {
            color: #ffffff;
            margin-top: 20px; /* Optional: Add some top margin for headings */
		}
        img {
            width: 100%;
            max-width: 600px;
            border-radius: 10px;
            margin: 10px 0;
            cursor: pointer; /* Make it clear the image is clickable */
            transition: transform 0.3s; /* Smooth transition */
        }
        .small-image {
            max-width: 600px; /* Set initial small size */
        }
        .full-size {
            max-width: 100%;
            transform: scale(1.5); /* Adjust scale for enlarged image */
        }
		.container {
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            margin: 20px;
            border-radius: 10px;
			transition: background-color 0.3s, color 0.3s;
        }
		.container.dark-mode {
            background-color: rgba(18, 18, 18, 0.8);
        }
        .code-container {
            margin-bottom: 20px; /* Space below each code block */
            padding: 10px; /* Add some padding inside the container */
            background-color: #f4f4f4; /* Light background to differentiate the area */
            border: 1px solid #ddd; /* Border around the container */
            border-radius: 5px; /* Rounded corners for the container */
        }
		body.dark-mode .code-container {
            margin-bottom: 20px; /* Space below each code block */
            padding: 10px; /* Add some padding inside the container */
            background-color: #333; /* Light background to differentiate the area */
            border: 1px solid #ddd; /* Border around the container */
            border-radius: 5px; /* Rounded corners for the container */
        }
        pre {
            background-color: #f4f4f4;
            padding: 10px;
            border: 1px solid #ddd;
            overflow-x: auto;
        }
		body.dark-mode pre {
            background-color: #333;
            padding: 10px;
            border: 1px solid #ddd;
            overflow-x: auto;
        }
        code {
            font-family: "Courier New", Courier, monospace;
        }
		body.dark-mode code {
            font-family: "Courier New", Courier, monospace;
			color: #ffffff;
        }
        .copy-button {
            position: relative; /* Change to relative */
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 6px 12px; /* Add padding for better visibility */
            cursor: pointer;
            font-size: 14px;
            transition: transform 0.2s; /* Smooth transition for hover effect */
            display: inline-block; /* Ensure it behaves like a button */
        }
        .copy-button:hover {
            transform: scale(1.1); /* Slightly enlarge on hover */
        }
        #backToTop {
            position: fixed;
            bottom: 20px;
            right: 30px;
            display: none;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px;
            cursor: pointer;
            font-size: 18px;
        }
        #backToTop:hover {
            background-color: #0056b3;
        }
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1000; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0, 0, 0, 0.8); /* Black w/ opacity */
            justify-content: center; /* Center the content horizontally */
            align-items: center; /* Center the content vertically */
        }
        .modal-content {
            max-width: 90%;
            max-height: 90%;
        }
        .close {
            position: absolute;
            top: 20px;
            right: 30px;
            cursor: pointer;
            font-size: 24px; /* Adjust size as needed */
            color: white; /* Close button color */
            background: none; /* Remove background */
            border: none; /* Remove border */
            z-index: 1001; /* Ensure it stays on top */
        }
		.menu-icon {
            cursor: pointer;
            padding: 14px 20px;
			font-size: 24px;
			font-weight: bold;
        }
				/* Adjusted width for a wider slider */
		.toggle-button {
			cursor: pointer;
			background-color: transparent;
			border: none;
			position: relative;
			width: 78px;  /* Increased width */
			height: 30px; /* Increased height */
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		/* The slider itself */
		.slider {
			position: relative;
			width: 100%;
			height: 100%;
			background-color: #ddd;  /* Light background color when in light mode */
			border-radius: 30px;  /* Round corners */
			display: flex;
			align-items: center;
			padding: 5px;
			transition: background-color 0.3s ease;  /* Smooth background color transition */
		}

		/* The moon and sun icons */
		.slider i {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			color: white;
			font-size: 18px;
			transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;  /* Smooth transition for sliding */
		}

		/* Position moon icon on the left side */
		.slider .fa-moon {
			left: 5px;
		}

		/* Position sun icon on the right side */
		.slider .fa-sun {
			right: 5px;
			transform: translateY(-50%) scale(0); /* Initially hidden */
		}

		/* When dark mode is active */
		body.dark-mode .slider {
			background-color: #333;  /* Dark background color */
		}

		/* When dark mode is active, slide the moon to the right and sun to the left */
		body.dark-mode .slider .fa-moon {
			transform: translateY(-50%) scale(0);  /* Hide moon */
			left: 50%;  /* Move moon to the right side */
		}

		body.dark-mode .slider .fa-sun {
			transform: translateY(-50%) scale(1);  /* Show sun */
			right: 5px;  /* Move sun to the left side */
		}
        .side-menu {
			position: absolute; /* Change to absolute positioning */
			top: 80px; /* Adjust this value to match the height of your navbar */
			left: -250px; /* Hide off-screen */
			width: 250px;
			height: calc(100% - 60px); /* Adjust height to fit below the navbar */
			background-color: #007BFF;
			transition: left 0.3s;
			z-index: 999;
			padding-top: 20px; /* Add some padding */
		}
        .side-menu a {
            padding: 15px 20px;
            text-decoration: none;
            color: white;
            display: block;
        }
        .side-menu a:hover {
            background-color: #0056b3;
        }
		footer {
            text-align: center;
            margin-top: 20px;
            padding: 20px;
            background-color: #f1f1f1;
			transition: background-color 0.3s, color 0.3s;
        }
		footer.dark-mode {
            background-color: #222222;
        }
        footer img {
            height: 40px;
            width: auto;
        }
		.share-container {
			margin: 20px 0;
		}
		.share-button {
			background-color: #25D366; /* WhatsApp color */
			color: white;
			border: none;
			border-radius: 5px;
			padding: 10px 20px;
			cursor: pointer;
			font-size: 16px;
			display: flex; /* Use flexbox for better alignment */
			align-items: center; /* Center vertically */
			transition: background-color 0.3s;
		}

		.share-button i {
			margin-right: 8px; /* Space between icon and text */
		}

		.share-button:hover {
			background-color: #1DAF56; /* Darker shade on hover */
		}
		.content-wrapper {
            text-align: center;
            color: #000000;
			transition: background-color 0.3s, color 0.3s;
        }
        .content-wrapper.dark-mode {
            text-align: center;
            color: #ffffff;
        }
		/* Cookie Consent Pop-up */
        .cookie-consent {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #333;
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 14px;
            z-index: 9999;
            display: none;  /* Hidden by default */
            transition: background-color 0.3s, color 0.3s; /* Smooth transition for cookie consent */
        }

        .cookie-consent-content a {
            color: #ffdd57;
            text-decoration: none;
        }

        .cookie-consent .accept-cookies {
            background-color: #ffdd57;
            color: #333;
            padding: 10px 20px;
            font-size: 14px;
            border: none;
            cursor: pointer;
            margin-top: 10px;
            border-radius: 5px;
        }

        .cookie-consent .accept-cookies:hover {
            background-color: #e0c13d;
        }

        /* Dark Mode Styles for Cookie Consent */
        body.dark-mode .cookie-consent {
            background-color: #222; /* Darker background */
            color: #ddd;  /* Lighter text for dark mode */
        }

        body.dark-mode .cookie-consent-content a {
            color: #ffdd57;  /* Keep the link color consistent */
        }

        body.dark-mode .cookie-consent .accept-cookies {
            background-color: #ffdd57;
            color: #222;  /* Darker text on the button */
        }

        body.dark-mode .cookie-consent .accept-cookies:hover {
            background-color: #e0c13d;  /* Button hover effect */
        }
		.share-container {
			margin: 20px 0;
			display: flex;
			align-items: center; /* Center vertically */
		}
		.share-button {
			background-color: #25D366; /* WhatsApp color */
			color: white;
			border: none;
			border-radius: 2px;
			padding: 2px 2px;
			cursor: pointer;
			font-size: 16px;
			display: flex; /* Use flexbox for better alignment */
			align-items: center; /* Center vertically */
			transition: background-color 0.3s;
		}

		.share-button i {
			margin-right: 0px; /* Space between icon and text */
		}

		.share-button:hover {
			background-color: #1DAF56; /* Darker shade on hover */
		}
		.fb-share-button {
			margin-right: 2px; /* Space between buttons */
		}
		a {
			color: #007BFF;
		}
		a.dark-mode {
			color: #007BFF;
		}
		.long-text {
			white-space: nowrap; /* Keeps it on one line */
			overflow-x: auto; /* Adds a horizontal scrollbar if necessary */
			display: block; /* Ensures the scrollbar appears properly */
		}