:root {
                --primary-blue: #007bff;
                --primary-purple: #865ed6;
                --gradient-start: #007bff;
                --gradient-end: #865ed6;
                --navbar-bg: linear-gradient(#cd85f0, #a4aeeb, #70e2e6);
                --text-color: #ffffff;
                --dropdown-bg: #fff;
                --dropdown-link-color: #333;
                --accent-color: #64ffda;
                }
                html {
                  scroll-behavior: smooth;
                }
                ::-webkit-scrollbar {
                width: 8px;
                }
                ::-webkit-scrollbar-track {
                background: var(--primary-dark);
                }
                ::-webkit-scrollbar-thumb {
                background: var(--secondary-dark);
                border-radius: 4px;
                }
                ::-webkit-scrollbar-thumb:hover {
                background: var(--accent-color);
                }
                .navbar {
                <!--                background: var(&#45;&#45;navbar-bg);-->
                padding: 1rem 2rem;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                position: fixed;
                width: 100%;
                top: 0;
                z-index: 1030;
                transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
                }

                .navbar.header-hidden {
                transform: translateY(-100%);
                box-shadow: none;
                }

                .navbar-brand img {
                height: 40px;
                }

                .navbar-nav .nav-link,
                .navbar-toggler {
                color: var(--text-color) !important;
                font-weight: 500;
                transition: color 0.3s ease;
                }

                .navbar-nav .nav-link:hover,
                .navbar-nav .nav-link.active {
                color: rgba(255, 255, 255, 0.8) !important;
                }

                /* Centering the nav items and adding space for the button */
                .navbar-nav-center {
                flex-grow: 1;
                justify-content: center;
                }

                /* --- Modern Dropdown Styles --- */
                .dropdown-menu-modern {
                width: 60vw; /* Adjust width for the mega menu effect */
                background-color: var(--dropdown-bg);
                border: none;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                border-radius: 0.5rem;
                padding: 1rem;
                margin-top: 12vh;
                position: fixed;
                z-index: 1020;
                display: flex;
                }

                .service_card {
                display: flex;
                align-items: center;
                padding: 0.75rem 1rem;
                border-radius: 0.5rem;
                text-decoration: none;
                color: var(--dropdown-link-color);
                transition: background-color 0.3s ease, transform 0.3s ease;
                }

                .service_card:hover {
                background-color: #f0f2f5;
                transform: translateY(-2px);
                color: var(--dropdown-link-color);
                }

                .service-icon {
                width: 40px;
                height: 40px;
                border-radius: 0.5rem;
                margin-right: 1rem;
                flex-shrink: 0;
                }

                .service_card .card-content {
                flex-grow: 1;
                }

                .service_card .card-title {
                font-weight: 600;
                margin-bottom: 0.2rem;
                font-size: 1rem;
                color: var(--primary-blue);
                }

                .service_card .card-text {
                font-size: 0.875rem;
                color: #6c757d;
                margin-bottom: 0;
                }

                .dropdown-item-header {
                font-weight: bold;
                text-transform: uppercase;
                font-size: 0.9rem;
                color: #999;
                margin-bottom: 0.5rem;
                padding: 0 1rem;
                }

                /* Animated Sign In button styles */
                .btn-signin {
                background: transparent;
                color: var(--text-color);
                font-weight: 600;
                padding: 0.5rem 1.5rem;
                border-radius: 2rem;
                position: relative;
                z-index: 1;
                overflow: hidden;
                transition: color 0.4s ease;
                }

                /* Hover background for the button */
                .btn-signin::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
                transition: left 0.4s ease;
                z-index: -1;
                }

                /* Border animation */
                .btn-signin::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 2rem;
                background: transparent;
                border: 2px solid var(--text-color);
                transition: border-color 0.4s ease;
                }

                .btn-signin:hover {
                color: #fff;
                }

                .btn-signin:hover::before {
                left: 0;
                }

                .btn-signin:hover::after {
                border-color: transparent;
                }

                /* User Profile Dropdown Styles */
                .user-profile {
                cursor: pointer;
                display: flex;
                align-items: center;
                color: var(--text-color);
                font-weight: 600;
                }

                .user-profile img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                margin-right: 0.5rem;
                border: 2px solid transparent;
                transition: border-color 0.3s ease;
                }

                .user-profile:hover img {
                border-color: var(--text-color);
                }

                .dropdown-menu-user {
                min-width: 200px;
                }

                .dropdown-menu-user .dropdown-item {
                display: flex;
                align-items: center;
                }

                .dropdown-menu-user .dropdown-item i {
                margin-right: 0.75rem;
                }

                /* Sidebar styles for mobile view */
                .sidebar {
                position: fixed;
                top: 0;
                left: -100%;
                height: 100%;
                width: 75%;
                background: var(--navbar-bg);
                color: var(--text-color);
                padding: 2rem;
                box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
                transition: left 0.4s ease-in-out;
                z-index: 1050;
                overflow-y: auto; /* Make sidebar scrollable */
                }

                .sidebar.open {
                left: 0;
                }

                .sidebar .nav-link,
                .sidebar .btn-signin {
                color: var(--text-color) !important;
                font-size: 1.2rem;
                padding: 0.75rem 0;
                }

                .sidebar .btn-signin {
                border: 2px solid var(--text-color);
                background: transparent;
                margin-top: 1rem;
                width: 100%;
                }

                .sidebar .btn-signin:hover {
                color: var(--text-color); /* Maintain color on hover for sidebar button */
                }

                .sidebar .btn-signin::before,
                .sidebar .btn-signin::after {
                display: none; /* Disable the animation in the sidebar */
                }

                .sidebar .dropdown-menu {
                position: static;
                background: transparent;
                box-shadow: none;
                border: none;
                padding-left: 1rem;
                }

                /* New style for floating user menu in sidebar */
                .sidebar .dropdown-menu-user {
                background-color: var(--dropdown-bg);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                border-radius: 0.5rem;
                padding: 0.5rem;
                min-width: 200px;
                }

                .sidebar .dropdown-menu-user .dropdown-item {
                color: var(--dropdown-link-color); /* Set color for items inside the floating box */
                padding: 0.5rem 1rem;
                }

                .sidebar .close-btn {
                position: absolute;
                top: 1rem;
                right: 1rem;
                font-size: 2rem;
                cursor: pointer;
                color: var(--text-color);
                }

                /* Overlay for when sidebar is open */
                .overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.4s ease-in-out;
                z-index: 1040;
                }

                .overlay.visible {
                opacity: 1;
                visibility: visible;
                }

                /* Hide the default navbar-collapse on mobile and show custom sidebar */
                @media (max-width: 991.98px) {
                .navbar-collapse {
                display: none;
                }
                }

                /* Floating Menu Button */
                .floating-menu-btn {
                position: fixed;
                bottom: 20px;
                right: 20px;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background: var(--navbar-bg);
                color: var(--text-color);
                border: none;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                z-index: 1020;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, transform 0.4s ease-in-out;
                transform: scale(0.9);
                }

                .floating-menu-btn.floating-menu-visible {
                opacity: 1;
                visibility: visible;
                transform: scale(1);
                }

                /* New style for the back-to-top button */
                .back-to-top-btn {
                position: fixed;
                bottom: 80px; /* Adjusted position to be above the menu button */
                right: 20px;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background: var(--navbar-bg);
                color: var(--text-color);
                border: none;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                z-index: 1021; /* Higher z-index to stack on top */
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, transform 0.4s ease-in-out;
                transform: scale(0.9);
                }

                .back-to-top-btn.back-to-top-visible {
                opacity: 1;
                visibility: visible;
                transform: scale(1);
                }
                #servicesCollapse ul li a {
                color: white;
                }
                .service-card-home {
                transition: all 0.3s ease-in-out;
                background-color: #214a72;!important; /* Darker card background */
                border-left: 4px solid transparent; /* Prepare for hover accent */
                border-radius: 0.75rem; /* Rounded corners */
                cursor: pointer;
                }

                .service-card-home:hover {
                transform: translateY(-5px); /* Lift effect */
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5)
                border-left-color: #6610f2; /* Bootstrap Purple accent */
                }

                /* Adjust modal header border color for dark theme */
                .modal-header {
                border-bottom-color: #495057;
                color: var(--text-color);
                }
                /* Ensure primary button stands out */
                .btn-primary {
                background-color: #6610f2; /* Bootstrap purple */
                border-color: #6610f2;
                transition: background-color 0.3s ease, transform 0.3s ease;
                }
                .btn-primary:hover {
                background-color: #550dc6;
                border-color: #550dc6;
                }

                /* NEW: Custom style for fixed height and scrollable area */
                .modal-body-content-wrapper {
                max-height: 400px; /* Set a fixed max height */
                overflow-y: auto; /* Enable vertical scrolling */
                padding-right: 15px; /* Add padding to prevent content from touching the scrollbar */
                }

                /* --- Custom Scrollbar Styling for WebKit Browsers --- */
                .modal-body-content-wrapper::-webkit-scrollbar {
                width: 8px; /* Thin scrollbar */
                }

                .modal-body-content-wrapper::-webkit-scrollbar-track {
                background: #2c3034; /* Dark track background */
                border-radius: 10px;
                }

                .modal-body-content-wrapper::-webkit-scrollbar-thumb {
                background-color: #495057; /* Medium gray thumb */
                border-radius: 10px; /* Rounded corners */
                border: 2px solid #2c3034; /* Inner border to give depth */
                }

                .modal-body-content-wrapper::-webkit-scrollbar-thumb:hover {
                background-color: #6c757d; /* Slightly lighter on hover */
                }

                .modal-content {
                background-color: var(--primary-dark); /* Dark modal background */
                box-shadow: 0 2px 10px var(--accent-color); /* Accent shadow */
                }
                .modal-footer {
                color: var(--text-color);
                }
                .service-card-data {
                color: var(--text-color);
                }
                .bi {
                color: var(--accent-color);
                }
                .text-accent {
                color: var(--accent-color);
                }