/* 🌎 Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 🌟 Logo Styling */
.logo {
    font-family: 'Orbitron', 'Rajdhani', 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 60px; /* Large default size */
    text-align: center;
    transition: font-size 0.3s ease-in-out;
}

/* 🏠 Global Body Styling (Light Mode Default) */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    display: flex;
    min-height: 100vh;
    transition: background 0.3s ease, color 0.3s ease;
}


/* 🌙 Dark Mode */
body.dark-mode {
    background: linear-gradient(to right, #121212, #1e1e1e); /* Dark theme gradient */
    color: #f1f1f1;
}

/* 🖱️ Scrollbar Styling */
body::-webkit-scrollbar {
    width: 5px;
}
body::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 3px;
}
body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* 🌙 Dark Mode Scrollbar */
body.dark-theme::-webkit-scrollbar-thumb {
    background-color: #555;
}
body.dark-theme::-webkit-scrollbar-track {
    background: #222;
}

/* 📱 Mobile & Tablet Responsive Design */
@media (max-width: 1024px) {
    body {
        padding: 0px;
    }
	
/* 🖱️ Scrollbar Styling */
body::-webkit-scrollbar {
    width: 0px;
}
    .logo {
        font-size: 50px;
    }
    .container {
        width: 100%;
        flex-direction: column;
    }
    .menu {
        display: block;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
    .logo {
        font-size: 45px;
    }
    .container {
        width: 100%;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    .logo {
        font-size: 38px;
    }
}

/* Container Layout */
/* Main container that holds the sidebar and content */
.container {
    display: flex; /* Flexbox for horizontal alignment */
    width: 100%; /* Occupies full viewport width */
    height: 100%; /* Ensures full viewport height */
    transition: all 0.3s ease; /* Smooth layout transitions */
}
/* Sidebar */
.sidebar {
    width: 18%; /* Set the sidebar width */
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    padding: 20px;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 10;
    overflow-y: auto;
}

/* Sidebar Logo */
.sidebar .logo {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 30px;
    color: #00416a;
    text-align: center;
}

/* Sidebar Links */
.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-direction: column;
    display: flex;
    width: 100%;
}

.sidebar ul li {
    margin-bottom: 10px;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/static/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/static/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/static/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

.sidebar ul li a {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    line-height: 1.0;
    cursor: pointer;
    padding: 10px;
    text-decoration: none;
    font-family: system-ui;
        font-size: medium;
    color: #333;
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.sidebar ul li a:hover {
    background-color: none;
    color: auto;
    transform: scale(1.05);
}

/* Sidebar Icons */
.sidebar ul li a svg {
    height: 22px;
    width: 22px;
}

body.dark-mode .sidebar .logo {
    color: #f7f7f7; /* White logo */
}

body.dark-mode .sidebar ul li a {
    color: #ddd; /* Lighter text */
}

body.dark-mode .sidebar ul li a:hover {
    background-color: #A3A29E; /* Subtle hover effect */
    color: ; /* White text on hover */
}

/* 🎨 Sidebar Icons - Adjust for Dark Mode */
.sidebar ul li a svg {
    fill: ; /* Inherit text color */
    transition: fill 0.3s ease-in-out;
}

body.dark-mode .sidebar ul li a svg {
    fill: #ddd; /* Lighter icons in dark mode */
}

/* Optional Scrollbar Styling */
.sidebar::-webkit-scrollbar {
    width: 1.5px;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: ;
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-track {
    background-color: ;
}.bottom-nav {
	display: none;
}
/* Hide Sidebar & Show Bottom Navbar on Small Screens */
@media screen and (max-width: 768px) {
    .sidebar {
        display: none; /* Hide sidebar on small screens */
    }
.sidebar  ul li a svg {
        display: none; /* Hide sidebar on small screens */
    }
 /* =========== BOTTOM NAVIGATION =========== */
/* 🔹 Fixed Bottom Navigation */
.bottom-nav {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #f3f3f3;
	overflow: Hidden;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid #D0D0D0;
    z-index: 1500;
    box-shadow: none;
}

    .bottom-nav ul {
        list-style: none;
        display: flex;
        justify-content: space-evenly;
        width: 600px;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    .bottom-nav ul li {
        margin-bottom: 0;
    }

    .bottom-nav ul li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 40px;
        border-radius: 24px;
        cursor: pointer;
        font-size: 0.85rem;
        padding: 5px;
        color: ; /* Default text color */
        text-decoration: none;
        transition: transform 0.2s ease, opacity 0.3s ease, color 0.3s ease;
    }
    
/* 🔹 Sidebar Menu Item Hover (Dark Mode) */
body.dark-theme .bottom-nav ul li a:hover {
    background: #5f5f5f3d;
    color: unset  !important;
    box-shadow: 0px 0px 0px 20px #5f5f5f3d;
}

    .bottom-nav ul li a svg {
        width: 26px;
        height: 26px;
        fill: ; /* Default black icon */
        transition: transform 0.2s ease, fill 0.3s ease;
    }

    .bottom-nav ul li a:hover {
        opacity: 0.9;
    background: #afbcff57;
    box-shadow: 0px 0px 0px 20px #afbcff57;
    color: #325dff !important;
        color: ; /* Change text color on hover */
    }

    .bottom-nav ul li a:hover svg {
        transform: none;
        fill: #; /* Change icon color to match the hover color */
    }

    .bottom-nav ul li a span {
        display: none; /* Hide text for bottom nav */
		
    }
}
/* =================== Show only logo image on screens less than 1024px =================== */
@media screen and (max-width: 1024px) {
    .sidebar {
        width: 10%; /* Reduce sidebar width instead of hiding */
        transition: width 0.3s ease-in-out;
    }

    .sidebar .logo {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar .logo-img {
        display: block; /* Show logo image */
        max-width: 70px; /* Adjusted size for better fit */
        height: auto;
    }

    .sidebar .logo-text {
        display: none; /* Hide text "Gamtha" */
    }

    .sidebar ul li a span {
        display: none; /* Hide sidebar text */
		justify-content: center;
    }
    .sidebar ul li a {
		justify-content: center;
        width: 70%;
	}

    .sidebar svg {
        display: inline-block; /* Show only icons */
        justify-content: center; /* Center align content horizontally */
        align-items: center; /* Center align content vertically */
    }

    .content {
        margin-left: 10%; /* Adjust content width accordingly */
        width: 90%;
    }
}

/* =================== Restore full sidebar on larger screens (1025px and above) =================== */
@media screen and (min-width: 1025px) {
    .sidebar {
        width: 245px; /* Restore full sidebar width */
		border-right: none;
    }
body.dark-theme .sidebar {
    background: #181818;
    color: white;
    border-right: none;
    transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
    .sidebar .logo {
        display: flex;
        align-items: center;
        margin-left: 10%;
    }

    .sidebar .logo-img {
        display: none; /* Hide image logo */
    }

    .sidebar .logo-text {
        display: inline-block; /* Show text "Gamtha" */
    font-family: 'Orbitron', 'Rajdhani', 'Exo 2', sans-serif;
    font-size: clamp(28px, 5vw, 25px);
    letter-spacing: 1.4px;
    transition: color 0.3s ease;
    }

    .sidebar ul li a span {
        display: inline-block; /* Show sidebar text */
    }

    .sidebar ul li a svg {
        display: inline-block; /* Ensure icons are also shown */
        justify-content: center; /* Center align content horizontally */
        align-items: center; /* Center align content vertically */
    }

    .content {
        margin-left: 18%; /* Matches the full sidebar width */
        width: 82%;
    }
}
/* =================== Show only logo image on screens less than 1024px =================== */
@media screen and (max-width: 1024px) {
    .sidebar {
        width: 10%; /* Reduce sidebar width instead of hiding */
        transition: width 0.3s ease-in-out;
    }
.sidebar .logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 🌞 Light Theme - Show Light Logo, Hide Dark */
.sidebar .light-logo {
    display: block;
        margin: 0;
}
.sidebar .dark-logo {
    display: none;
}

/* 🌙 Dark Theme - Show Dark Logo, Hide Light */
body.dark-theme .sidebar .light-logo {
    display: none;
        margin: 0;
}
body.dark-theme .sidebar .dark-logo {
    display: block;
        margin: 0;
}

/* 📌 Sidebar Logo Styling */
.sidebar .logo-img {
    max-width: 70px; /* Adjusted size for better fit */
    height: auto;
    transition: opacity 0.3s ease-in-out; /* Smooth transition */
}

/* 🌙 Enhance Visibility on Dark Theme */
body.dark-theme .sidebar .dark-logo {
    filter: brightness(1) contrast(1.2);
}

    .sidebar .logo-text {
        display: none; /* Hide text "Gamtha" */
    }

    .sidebar ul li a span {
        display: none; /* Hide sidebar text */
    }

    .sidebar svg {
        display: inline-block; /* Show only icons */
        justify-content: center; /* Center align content horizontally */
        align-items: center; /* Center align content vertically */
    }

}
/* =================== Mobile View: Show only the logo image (hide text) =================== */
@media screen and (max-width: 768px) {
    .sidebar {
        width: 10%; /* Minimized sidebar */
        position: fixed; /* Keep sidebar fixed */
        top: 0;
        left: 0;
        height: 100vh; /* Full height */
        padding: 20px 10px; /* Adjust padding */
        background: #e4e5e6; /* Light minimalistic theme */
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center;
        justify-content: flex-start;
        z-index: 1000; /* Ensure it's above content */
        overflow-y: auto; /* Enable vertical scrolling */
        transition: width 0.3s ease-in-out;
    }

    .sidebar .logo {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar .logo-img {
        width: 80%; /* Optimized width for responsiveness */
        max-width: 100px; /* Maintain a reasonable max size */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Ensure block-level behavior */
        margin: 0 auto 30px auto; /* Center logo and add bottom spacing */
        object-fit: contain; /* Ensure image scales well */
    }

    .sidebar .logo-img {
        width: 80%; /* Optimized width for responsiveness */
        max-width: 100px; /* Maintain a reasonable max size */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Ensure block-level behavior */
        margin: 0 auto 30px auto; /* Center logo and add bottom spacing */
        object-fit: contain; /* Ensure image scales well */
    transition: opacity 0.3s ease-in-out; /* Smooth transition */
    }

    .sidebar .logo-text {
        display: none; /* Hide text "Gamtha" */
    }

/* 🌞 Light Theme - Show Light Logo, Hide Dark */
.sidebar .light-logo {
    display: block;
}
.sidebar .dark-logo {
    display: none;
}

/* 🌙 Dark Theme - Show Dark Logo, Hide Light */
body.dark-theme .sidebar .light-logo {
    display: none;
}
body.dark-theme .sidebar .dark-logo {
    display: block;
}

/* 📌 Sidebar Logo Styling */
.sidebar .logo-img {
    max-width: 70px; /* Adjusted size for better fit */
    height: auto;
}

/* 🌙 Enhance Visibility on Dark Theme */
body.dark-theme .sidebar .dark-logo {
    filter: brightness(1) contrast(1.2);
}
    .sidebar .logo-text {
        display: none; /* Hide text "Gamtha" */
    }

    .sidebar ul {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .sidebar ul li {
        width: 100%;
        text-align: center;
    }

    .sidebar ul li a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 98%;
        height: 50px;
        text-decoration: none;
        font-size: 1.2rem;
        color: #333; /* Ensure text/icon color */
        border-radius: 10px;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .sidebar ul li a svg {
        font-size: 1.5rem; /* Adjust icon size */
        margin-right: 8px; /* Space between icon and text */
        justify-content: center; /* Center align content horizontally */
        align-items: center; /* Center align content vertically */
    }

    .content {
        margin-left: 10%; /* Adjust content width */
        width: calc(100% - 10%);
    }
}
/* Content Area */
/* =================== CONTENT AREA =================== */
.content {
    margin-left: 245px; /* Starts after the sidebar */
    width: calc(100% - 245px); /* Fills remaining screen dynamically */
    max-width: 100%; /* Ensures it expands properly */
    padding: 0px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    height: 100vh; /* Full height */
    overflow-y: auto; /* Enables vertical scrolling */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    background-color: transparent;
    display: flex;
    flex-direction: column; /* Ensures structured content layout */
    align-items: center; /* Center content horizontally */
    justify-content: flex-start; /* Align content to the top */
}

body.dark-theme .content {
    background-color: #0000008c;
}

/* Optional Scrollbar Styling */
.content::-webkit-scrollbar {
    width: 5px;
}

.content::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}

.content::-webkit-scrollbar-track {
    background-color: ;
}
/* =================== RESPONSIVE DESIGN =================== */

/* Medium Screens: Tablets (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .content {
        margin-left: 75px;
        width: calc(100% - 75px);
        padding: auto; /* Slightly reduce padding */
    }
}

/* Small Screens: Mobile (Below 768px) */
@media screen and (max-width: 768px) {
    .sidebar {
        display: none; /* Hide sidebar completely */
    }

    .content {
        margin-left: 0; /* No sidebar */
        width: 100%;
        padding: 0px 8px 8px;
    }
}

/* Extra Small Screens (Below 480px) */
@media screen and (max-width: 480px) {
    .content {
        padding: 10px; /* Further reduce padding for compact view */
        font-size: 0.9rem; /* Slightly smaller text for readability */
    }
}

/* 📌 Default Sidebar Logo */
.menu-item-Gamtha .logo-img-sidebar {
    height: 25px; /* Set the height of the logo */
    width: 25px;  /* Maintain the aspect ratio of the logo */
	justify-content: center;
    transition: opacity 0.3s ease-in-out; /* Smooth transition effect */
}

/* 🌞 Light Theme - Show Light Logo, Hide Dark */
.menu-item-Gamtha .light-logo {
    display: block;
}
.menu-item-Gamtha .dark-logo {
    display: none;
}

/* 🌙 Dark Theme - Show Dark Logo, Hide Light */
body.dark-theme .menu-item-Gamtha .light-logo {
    display: none;
}
body.dark-theme .menu-item-Gamtha .dark-logo {
    display: block;
}

/* =================== HERO SECTION =================== */
.hero-section {
    background: linear-gradient(to right, #ffffff, #f5f5f5);
    text-align: center;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vw 5%; /* Responsive padding */
    box-sizing: border-box;
}

.hero-content {
    max-width: 850px;
    text-align: center;
}

.hero-content h1 {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: bold;
    color: #222;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-content p {
    font-size: clamp(16px, 2vw, 22px);
    line-height: 1.7;
    color: #555;
    margin-bottom: 30px;
}

/* Responsive Buttons */
.btn-primary {
    display: inline-block;
    background: #0056b3;
    color: #fff;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    border-radius: 12px;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.3);
}

.btn-primary:hover {
    background: #004494;
    box-shadow: 0 6px 15px rgba(0, 86, 179, 0.5);
}

/* =================== FEATURED CONTENT =================== */
.featured-content {
    display: flex;
    justify-content: center;
    gap: 3vw;
    padding: 5vw 5%;
    flex-wrap: wrap;
    text-align: center;
    max-width: 1300px;
    margin: 0 auto;
}

.card {
    background: #f9f9f9;
    padding: 2rem;
    border-radius: 15px;
    width: clamp(300px, 45%, 420px);
    text-align: center;
    transition: 0.3s ease-in-out;
    border-bottom: 5px solid transparent;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card:hover {
    border-bottom: 5px solid #0056b3;
    transform: scale(1.05);
}

/* =================== CORE HIGHLIGHTS =================== */
.core-highlights {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 3vw;
    padding: 5vw 5%;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.highlight {
    background: #f4f4f4;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    width: clamp(320px, 48%, 600px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.highlight:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
    .hero-section {
        min-height: 60vh;
        padding: 4vw;
    }
    .featured-content {
        flex-direction: column;
        align-items: center;
    }
    .card, .highlight {
        width: 90%;
    }
    .btn-primary {
        font-size: 1rem;
        padding: 12px 24px;
    }
}


.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 1rem;
    color: #333;
    padding: 10px 15px;
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-item:hover {
    background-color: #f0f4ff;
    color: #0077b6;
}

.menu-item svg {
    transition: transform 0.3s ease, stroke 0.3s ease;
}

.menu-item:hover svg {
    transform: scale(1.0);
	fill: auto; /* Adapts to text color */;
    stroke: #0077b6;
}
/* =================== Show only logo image on screens less than 1024px =================== */
@media screen and (max-width: 1024px) {

    .menu-item .logo {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .menu-item ul li a span {
        display: none; /* Hide sidebar text */
    }

    .menu-item svg {
        display: inline-block; /* Show only icons */
        justify-content: center; /* Center align content horizontally */
        align-items: center; /* Center align content vertically */
    }
}


/* General Styling for the Interactive Section */
/* Overlay Styles */
/* User Info Section */
#profile-info-section {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff; /* Clean white background */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    z-index: 1000;
    width: 400px;
    max-width: 90%;
    font-family: 'Arial', sans-serif;
}

/* Form Styles */
#profileInfoForm h2 {
    font-size: 1.5rem;
    color: #0056b3;
    margin-bottom: 20px;
}

#profileInfoForm input,
#profileInfoForm textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}

#profileInfoForm button {
    width: 100%;
    padding: 12px;
    background: #4c9af9;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}

#profileInfoForm button:hover {
    background: #3a7bd5;
}

/* Interactive Overlay */
#interactive-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dark overlay with transparency */
    backdrop-filter: blur(10px); /* Background blur effect */
    display: none; /* Hidden by default */
    z-index: 5000; /* Overlay above all other elements */
}

/* Interactive Section Container */
#interactive-section {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centered horizontally and vertically */
    background: linear-gradient(135deg, #ffffff, #f9f9f9); /* Subtle gradient for a modern look */
    padding: 30px; /* Spacing inside the container */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* Shadow for depth */
    z-index: 5100; /* Above the overlay */
    width: 90%; /* Responsive width */
    max-width: 700px; /* Restrict max width on larger screens */
}

/* Visibility Toggle */
.visible {
    display: block;
}
/* =================== 🏆 PREVIOUSLY LOGGED-IN USERS SECTION =================== */
#previousAccounts {
    width: 40%; /* Standard width */
    background: transparent;
    padding: 20px;
    position: absolute; /* Positioned relative to parent */
    left: 0%; /* Aligned to the right */
    top: 10%; /* Adjusted positioning */
    height: 330px; /* Fixed height */
    animation: fadeIn 0.8s ease-in-out; /* Smooth fade-in animation */
    z-index: 10; /* Ensures it appears on top of other elements */
    overflow-y: auto; /* Enables vertical scrolling */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    border-radius: 10px; /* Slightly rounded edges */
}

/* 🖱️ Scrollbar Customization */
#previousAccounts::-webkit-scrollbar {
    width: 6px; /* Thin scrollbar */
}

#previousAccounts::-webkit-scrollbar-thumb {
    background: #c0c0c0; /* Scrollbar thumb color */
    border-radius: 4px; /* Rounded corners for the thumb */
}

#previousAccounts::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0; /* Darker color on hover */
}

/* =================== 🏆 SECTION HEADING =================== */
#previousAccounts h3 {
    font-size: 1.6rem; /* Slightly larger heading */
    color: #0046a3; /* Deep blue color */
    margin-bottom: 20px; /* Extra spacing */
    text-align: center; /* Center-aligned */
    font-weight: bold;
}

/* =================== 🔹 ACCOUNTS LIST =================== */
#accountsList {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
}

#accountsList li {
    padding: 12px 15px; /* Balanced inner padding */
    margin-bottom: 12px; /* Increased spacing for better readability */
    background: linear-gradient(135deg, #f9f9f9, #ffffff); /* Modern gradient */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); /* Subtle shadow */
	color:black;
    cursor: pointer; /* Pointer cursor to indicate interactivity */
    transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
}

/* 🔥 Hover Effect for List Items */
#accountsList li:hover {
    background: linear-gradient(135deg, #e0f0ff, #f4faff); /* Highlighted gradient */
    transform: translateY(-4px); /* Enhanced lift effect */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow */
}

/* =================== 📱 RESPONSIVE DESIGN =================== */

/* 💻 Tablets (Up to 1024px) */
@media (max-width: 1024px) {
    #previousAccounts {
        width: 40%;
        left: 0%;
        top: 10%;
        height: 300px;
        padding: 15px;
    }

    #previousAccounts h3 {
        font-size: 1.5rem;
        color: #0056b3;
    }

    #accountsList li {
        padding: 10px;
        margin-bottom: 10px;
    }
}

/* 📱 Mobile Devices (Up to 768px) */
@media (max-width: 768px) {
    /* Hide previous accounts initially on small screens */
    #previousAccounts {
        width: 100%;
        top: 100%;
        max-height: 40vh;
        padding: 12px;
        border-radius: 8px;
        display: none; /* Hidden until button click */
    }
	#interactive-section {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #ffffff, #f9f9f9);
    padding: 30px;
    border-radius: 0px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    z-index: 5100;
    width: 100%;
    height: 100vh;
    max-width: 100%;
}
#previousAccounts {
    display: none !important;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 20px;
    text-align: center;
    background: rgb(255, 255, 255);
    padding: 20px;
    border-radius: 10px;
}
    /* Show switch button only on small screens */
    #switchToAccounts {
        display: block;
        text-align: center;
        font-size: 1rem;
        font-weight: bold;
        color: #4c9af9;
        cursor: pointer;
        margin-top: 10px;
    }

    /* Show back button only on small screens */
    #backToAuth {
        display: block;
        text-align: center;
        font-size: 1rem;
        color: #0056b3;
        cursor: pointer;
        font-weight: bold;
        margin-top: 10px;
    }
}

/* 📲 Small Phones (Up to 480px) */
@media (max-width: 480px) {
    #previousAccounts {
        width: 100%;
        max-height: 40vh;
        padding: 10px;
        border-radius: 6px;
        display: none; /* Keep hidden until button click */
    }
#previousAccounts {
    display: none;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 20px;
    text-align: center;
    background: rgb(255, 255, 255);
    padding: 20px;
    border-radius: 10px;
}
    #previousAccounts h3 {
        font-size: 1.2rem;
        color: #0056b3;
    }

    #accountsList li {
        padding: 8px;
        margin-bottom: 6px;
        font-size: 0.9rem;
    }
}

/* 📲 Ultra Small Phones (Up to 360px) */
@media (max-width: 360px) {
    #previousAccounts {
        width: 100%;
        top: 30%;
        max-height: 40vh;
        padding: 8px;
        display: none; /* Initially hidden */
    }
	#previousAccounts {
    display: none;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 20px;
    text-align: center;
    background: rgb(255, 255, 255);
    padding: 20px;
    border-radius: 10px;
}

    #previousAccounts h3 {
        font-size: 1.1rem;
    }

    #accountsList li {
        padding: 6px;
        margin-bottom: 5px;
        font-size: 0.85rem;
    }
}

/* 💻 Large Screens (Hide Switch Button & Show Previous Accounts) */
@media (min-width: 769px) {
    #switchToAccounts {
        display: none; /* Hide switch button */
    }

    #previousAccounts {
        display: block; /* Always visible */
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Hide back to login button */
    #backToAuth {
        display: none;
    }
}


/* Form Heading */
#authForm h2 {
    font-size: 1.8rem;
    color: #0056b3; /* Branding color */
    margin-bottom: 20px;
    font-weight: 600;
    text-align: center; /* Centered heading */
}

/* Input Fields */
#authForm input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd; /* Subtle border */
    border-radius: 8px;
    font-size: 1rem;
    background: #f9f9f9; /* Light input background */
    color: #333; /* Dark text for readability */
    outline: none;
    transition: border 0.3s ease, box-shadow 0.3s ease; /* Smooth focus effect */
}

#authForm input:focus {
    border-color: #4c9af9; /* Highlighted border on focus */
    box-shadow: 0 0 5px rgba(76, 154, 249, 0.5); /* Glow effect */
}

/* Submit Button */
#authForm button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(157deg, #f9c74c, #f96666, #ffee28); /* Unique gradient */
    color: #ffffff; /* High contrast text */
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease; /* Hover effects */
    box-shadow: 0 4px 12px rgba(76, 154, 249, 0.3); /* Button shadow */
}

#authForm button:hover {
    background: linear-gradient(157deg, #f9c74c, #f96666, #ffee28); /* Reversed gradient */
    transform: scale(0.98); /* Subtle hover lift */
}


/* Switch Form Option */
#switchFormOption {
    margin-top: 20px;
}

#switchFormOption p {
    color: #0056b3;
    font-size: 1rem;
}

#switchFormOption #switchAction {
    cursor: pointer;
    font-weight: bold;
    color: #4c9af9;
}
#forgotPasswordLink {
	color: none;
    cursor: pointer;
	
}
/* =================== 🌙 DARK THEME STYLES =================== */
/* Overlay */
body.dark-theme #interactive-overlay {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
}

/* Interactive Section */
body.dark-theme #interactive-section {
    background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
}

/* Previous Accounts Panel */
body.dark-theme #previousAccounts {
}

/* Scrollbar */
body.dark-theme #previousAccounts::-webkit-scrollbar-thumb {
    background: #555;
}
body.dark-theme #previousAccounts::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* Heading */
body.dark-theme #previousAccounts h3 {
    color: #66d0f9;
}

/* Account List Items */
body.dark-theme #accountsList li {
    background: linear-gradient(135deg, #2c2c2c, #2c2c2c);
    color: #ffffff;
    box-shadow: 0 3px 8px rgb(0 0 0 / 5%);
}
body.dark-theme #accountsList li:hover {
    background: linear-gradient(135deg, #294d61, #3a6073);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}
body.dark-theme #authForm h2 {
    color: #66d0f9;
}
body.dark-theme #authForm input {
    background: #2b2b2b;
    color: #f0f0f0;
    border: 1px solid #444;
}
body.dark-theme #authForm input:focus {
    border-color: #66d0f9;
    box-shadow: 0 0 5px rgba(102, 208, 249, 0.5);
}

/* Auth Button */
body.dark-theme #authForm button {
    background: linear-gradient(157deg, #f9c74c, #f96666, #ffee28);
    box-shadow: none;
}
body.dark-theme #authForm button:hover {
    background: linear-gradient(157deg, #f9c74c, #f96666, #ffee28);
}
body.dark-theme #authForm button:active {
    background:;
}

/* Switch Form Option */
body.dark-theme #switchFormOption p {
    color: #a0cfff;
}
body.dark-theme #switchFormOption #switchAction {
    color: #66d0f9;
}

/* Forgot Password */
body.dark-theme #forgotPasswordLink {
    color: #66d0f9;
}

/* Responsive Specific Overrides */
@media (max-width: 768px) {
    body.dark-theme #previousAccounts {
        background: #1c1c1c;
    }
}

@media (max-width: 480px) {
    body.dark-theme #previousAccounts {
        background: #1a1a1a;
    }
}

@media (max-width: 360px) {
    body.dark-theme #previousAccounts {
        background: #171717;
    }
}


/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    display: none;
    z-index: 999;
}

.openUserInfoBtn button {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

const aboutGamthaLink = document.querySelector('.menu-item-Gamtha'); // Select the "About Gamtha" link
const sidebarElement = aboutGamthaLink.closest('.sidebar'); // Get the sidebar parent element

// Apply styles to the sidebar and the "About Gamtha" link
await setElementStyles(sidebarElement, { position: 'relative' }); // Ensure the sidebar has relative positioning
await setElementStyles(aboutGamthaLink, {
  position: 'absolute', // Position the link absolutely within the sidebar
  bottom: '15px', // Adjust the position based on design
  left: '50%', // Center horizontally
  transform: 'translateX(-50%)', // Fine-tune the centering
  width: '18%', // Set the width to match the sidebar
  background: 'transparent', // Remove background color
  color: 'black', // Ensure the text color is black
  padding: '10px 15px', // Add padding
  textDecoration: 'none', // Remove underlining
  borderRadius: '5px', // Add rounded corners
  fontSize: '16px', // Set font size
  textAlign: 'center', // Center the text inside the link
});

// Get computed styles for both the sidebar and the "About Gamtha" link
const sidebarComputedStyles = window.getComputedStyle(sidebarElement);
const aboutGamthaLinkComputedStyles = window.getComputedStyle(aboutGamthaLink);

// Gather the data
const data = {
  sidebarWidth: sidebarComputedStyles['width'], // Width of the sidebar
  aboutGamthaLinkWidth: aboutGamthaLinkComputedStyles['width'], // Width of the "About Gamtha" link
  sidebarPosition: sidebarComputedStyles['position'], // Positioning of the sidebar
  aboutGamthaLinkPosition: aboutGamthaLinkComputedStyles['position'], // Positioning of the link
};

console.log(data); // Log the computed styles for debugging purposes


/* Profile Block Section */
.profile-showcase {
    margin: 30px auto;
    width: 100%; /* Full width for large screens */
    max-width: 1000px; /* Wider maximum width for readability */
    background: linear-gradient(135deg, #f9f9f9, #e8e8e8); /* Slight diagonal gradient for elegance */
    border-radius: 20px; /* Smooth, more prominent corners */
    padding: 30px 60px; /* Generous internal spacing */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* Softer shadow for depth */
    text-align: left; /* Aligns content to the left for a professional look */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Flexbox for better alignment */
    align-items: center; /* Centers content vertically */
    gap: 20px; /* Space between image and text */
}

/* Hover Effect */
.profile-showcase:hover {
    transform: scale(1.03); /* Slight hover effect for engagement */
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Profile Name Styling */
.profile-showcase .showcase-name {
    font-size: 2.2rem; /* Larger font size for emphasis */
    font-weight: bold;
    color: #00416a; /* Professional blue tone */
    margin-bottom: 10px;
}

/* Profile Bio Styling */
.profile-showcase .showcase-bio {
    font-size: 1.4rem; /* Slightly larger font size for readability */
    color: #555; /* Neutral but distinct color */
    line-height: 1.6; /* Improves text spacing */
}

/* Profile Picture Styling */
.profile-showcase .profile-pic {
    width: 150px; /* Larger picture */
    height: 150px;
    border-radius: 50%; /* Circular profile picture */
    object-fit: cover; /* Ensures the image fits nicely */
    border: 3px solid #ddd; /* Subtle border for emphasis */
}

/* 🔹 Splash Screen Full Container */
#splashScreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom, #e4e5e6, #f7f7f7);
    z-index: 99990;
    font-family: 'Orbitron', 'Rajdhani', 'Exo 2', sans-serif;
    overflow: hidden;
}

/* 🌙 Dark Theme */
body.dark-theme #splashScreen {
    background: linear-gradient(to bottom, #121212, #1c1c1c);
    color: #f0f0f0;
}

/* 🔹 Hide both logos by default */
.theme-logo {
    display: none;
}

/* ✅ Show correct logo based on theme */
#lightLogo {
    display: block;
}
#darkLogo {
    display: none;
}
body.dark-theme #lightLogo {
    display: none;
}
body.dark-theme #darkLogo {
    display: block;
}

/* 🔹 Centered Content Wrapper */
.splash-center-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* 🔹 Logo Styling */
#splashScreen img {
    height: auto;
    animation: fadeIn 1s ease-in-out;
}


body.dark-theme #splashScreen h1 {
    color: #c1bebe;
}

/* 🔹 Optional Loader */
.splash-loader {
    width: 36px;
    height: 36px;
    border: 4px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-top: 1.5rem;
}

body.dark-theme .splash-loader {
    border-top-color: #f0f0f0;
}

/* 🔹 Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 🔹 Responsive (Optional) */
@media (max-width: 480px) {
    #splashScreen h1 {
        font-size: x-large;
    }

    .splash-loader {
        width: 28px;
        height: 28px;
    }
}

/* Main Content */
#mainContent {
    padding: 20px;
}
/* =================== AI CONTENT AREA =================== */
.content-ai {
    margin-left: 70px; /* Accounts for sidebar width */
    width: calc(100% - 70px); /* Dynamically adjusts with sidebar */
    max-width: 100%; /* Prevents overflow */
    padding: 30px; /* Maintain padding for a clean layout */
    border-radius: 8px; /* Keep rounded corners */
    transition: all 0.3s ease; /* Smooth transition for interactivity */
    min-height: 100vh; /* Full height of the viewport */
    overflow-y: auto; /* Enable scrolling if needed */
    background: #ffffff; /* Maintain the same color as parent */
}
body.dark-theme .content-ai {
    background: #00000045;
    transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

.content-ai::-webkit-scrollbar {
    width: 0px;
}

.content-ai::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 3px;
}

.content-ai::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 1024px) {
    .content-ai {
        margin-left: 10%;
        width: calc(100% - 10%);
        padding: 20px; /* Adjust padding for medium screens */
    }
	
.content-ai::-webkit-scrollbar {
    width: 0px;
}

.content-ai::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 3px;
}

.content-ai::-webkit-scrollbar-track {
    background: #f1f1f1;
}

}

@media (max-width: 768px) {
    .content-ai {
        margin-left: 0; /* No sidebar on smaller screens */
        width: 100%; /* Full width */
        padding: 15px; /* Adjust padding for mobile */
    }
.content-ai::-webkit-scrollbar {
    width: 0px;
}

.content-ai::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 3px;
}

.content-ai::-webkit-scrollbar-track {
    background: #f1f1f1;
}

}

@media (max-width: 480px) {
    .content-ai {
        padding: 12px; /* Smaller padding for compact screens */
    }
.content-ai::-webkit-scrollbar {
    width: 0px;
}

.content-ai::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 3px;
}

.content-ai::-webkit-scrollbar-track {
    background: #f1f1f1;
}

}



/* =================== TABLET VIEW (769px - 1024px) =================== */
@media screen and (max-width: 1024px) {
    .sidebar {
        width: 75px; /* Increase sidebar width for better visibility */
        padding: 12px 0px 12px 0px;
        justify-content: center;
    }
	
	.sidebar ul li {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}

    .content-ai {
        margin-left: 70px; /* Adjust content margin */
        width: calc(100% - 70px); /* Adjust width */
        padding: 25px; /* Slightly reduce padding */
    }
.content-ai::-webkit-scrollbar {
    width: 0px;
}

.content-ai::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 3px;
}

.content-ai::-webkit-scrollbar-track {
    background: #f1f1f1;
}

}

/* =================== MOBILE VIEW (Up to 768px) =================== */
@media screen and (max-width: 768px) {
    .sidebar {
        width: 0%; /* Adjust sidebar width for smaller screens */
        padding: 10px 0 10px 0;
    }

    .content-ai {
        margin-left: 0%; /* Adjust content margin */
        width: 100%; /* Adjust width */
        padding: 20px; /* Reduce padding for better fit */
        height: auto; /* Adjust height for small screens */
    }
.content-ai::-webkit-scrollbar {
    width: 0px;
}

.content-ai::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 3px;
}

.content-ai::-webkit-scrollbar-track {
    background: #f1f1f1;
}

}

/* =================== EXTRA SMALL SCREENS (Up to 480px) =================== */
@media screen and (max-width: 480px) {
    .sidebar {
        display:none; /* Slightly wider sidebar for small screens */
    }

    .content-ai {
        margin-left: 0%; /* Adjust content margin */
        width: 100%); /* Adjust width */
        padding: 15px; /* Further reduce padding */
    }
.content-ai::-webkit-scrollbar {
    width: 0px;
}

.content-ai::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 3px;
}

.content-ai::-webkit-scrollbar-track {
    background: #f1f1f1;
}

}

/* =================== 🌍 Base Content Area =================== */
.content-op {
    margin-left: 365px; /* Adjust for sidebar */
    width: -webkit-fill-available; /* Fill remaining width dynamically */
    padding: 0px;
    border-radius: 0px;
    align-items: center;
    transition: all 0.3s ease;
    height: 100vh; /* Use full viewport height */
    overflow-y: auto; /* Enable vertical scrolling */
    background-color: transparent;
}
body.dark-theme .content-op {
	background: #0000008c;
}

/* =================== 📱 Tablets (Up to 1024px) =================== */
@media screen and (max-width: 1024px) {
    .content-op {
    }
}

/* =================== 📱 Mobile Devices (Up to 768px) =================== */
@media screen and (max-width: 768px) {
    .content-op {
        margin-left: 0;
        overflow: hidden;
        width: 100%;
        display: flex
;
        flex-direction: column;
        margin-bottom: inherit;
    }
}

/* =================== 📲 Small Phones (Up to 480px) =================== */
@media screen and (max-width: 480px) {
    .content-op {
        padding: 0px;
        border-radius: 0px; /* Slightly smaller border radius */
    }
}

/* =================== 📲 Ultra Small Phones (Up to 360px) =================== */
@media screen and (max-width: 360px) {
    .content-op {
        padding: 0;
        border-radius: 0;
    }
}




/* =================== MENU ICON =================== */
#menu-icon {
    display: none; /* Hidden by default on larger screens */
}

/* 🌙 Dark Mode */
body.dark-theme #menu-icon {
    color: #ffffff;
}

@media (max-width: 768px) {
    #open-sidebar-btn {
        display: block; /* Visible on mobile */
        font-size: 26px; /* Slightly larger for better visibility */
        left: 0px;
    }
}

@media (max-width: 480px) {
    #open-sidebar-btn {
        font-size: 24px;
        margin-right: 8px;
        left: 8px; /* Fine-tuned spacing */
    }
}

@media (max-width: 360px) {
    #open-sidebar-btn {
        font-size: 22px;
        left: 6px; /* Ensure spacing is correct */
    }
}

#open-sidebar-btn {
    color: #333333;
    padding: 8px;
	display: none;
    left: 5px;
    justify-content: center;
    position: absolute;
    font-size: 24px;
    cursor: pointer;
}
body.dark-theme  #open-sidebar-btn {
    color: #9b9b9b;
}

/* Overlay */
#overlay-sidebar {
  position: fixed;
  top: 0;
  left: 0;
    backdrop-filter: blur(1px);
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10000;
}

/* Sidebar */
#sidebar-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 75%;
    height: 100% !important;
  background: white;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 10001;
  padding: 20px 10px 30px;
  overflow-y: auto;
}
/* =================== SCROLLBAR STYLE =================== */
#sidebar-menu::-webkit-scrollbar {
    width: 4px;
}

#sidebar-menu::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 4px;
}

#sidebar-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Dark Theme Scrollbar */
body.dark-theme #sidebar-menu::-webkit-scrollbar-thumb {
    background-color: #555;
}

body.dark-theme #sidebar-menu::-webkit-scrollbar-track {
    background: #2c2c2c;
}


#sidebar-menu.open {
  transform: translateX(0);
}

/* Show overlay-sidebar */
#overlay-sidebar.show {
  opacity: 1;
  pointer-events: all;
}


@media (min-width: 769px) { 
 #overlay-sidebar {
  opacity: 0;
  pointer-events: none;
}
/* Show overlay-sidebar */
#overlay-sidebar.show {
  opacity: 0;
  pointer-events: none;
}
    body.dark-theme .sidebar {
        background: #111113;
        color: white;
        border-right: none;
        transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    }
	body.dark-theme .header-container {
    background: transparent;
    border-bottom: none;
}

#sidebar-menu {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

}

/* Close button inside sidebar */
#close-sidebar-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    height: 40px;
    display: none;
    align-items: center;
    border-radius: 50%;
    justify-content: center;
    width: 40px;
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
}
#close-sidebar-btn:hover {
	background:#ffffff4a;
}


body.dark-theme #close-sidebar-btn {
    fill: white;
}


body.dark-theme #close-sidebar-btn:hover {
    background: #c7c7c721;
}

/* =================== MENU ITEMS =================== */
#sidebar-menu h2 {
    text-align: center;
    margin-bottom: 15px;
    color: #00416a;
    font-family: 'Orbitron', 'Rajdhani', 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 30px;
}

/* Sidebar Menu */
#sidebar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Sidebar Menu Items */
#sidebar-menu li {
    border-radius: 6px;
    display: flex;
    gap: 5px;
    padding: 5px;
    cursor: pointer;
    margin: 10px 0px 0px;
    background: transparent;
    border-bottom: 0.2px;
    transition: background 0.3s;
}

/* Sidebar Menu Links */
#sidebar-menu ul li a {
    color: ;
    text-decoration: none;
    display: flex;
    align-items: center;
    width: -webkit-fill-available;
    font-size: 16px;
    padding: 8px;
    border-radius: inherit;
    gap: 10px;
}

/* Sidebar Icons */
#sidebar-menu ul li a svg {
    font-size: 16px;
}


/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {
    #open-sidebar-btn {
        display: flex; /* Show menu icon only on small screens */
        margin-right: 15px;
    }

    #sidebar-menu ul li a {
        font-size: medium;
        font-family: system-ui;
    }

    #sidebar-menu ul li a svg {
        font-size: medium;
        font-family: system-ui;
    }
}

@media (max-width: 480px) {
	
#close-sidebar-btn {
	display: flex;
}


/* Sidebar */
#sidebar-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 10001;
  padding: 20px 10px 30px;
  overflow-y: auto;
}
}



/* Completely Hide Sidebar on Large Screens */
@media (min-width: 769px) {
    #sidebar-menu {
        display: none !important;
    }
}



.sidebar-more-btn {
    position: sticky;
    bottom: 0px;
  left: 16px;
  width: calc(240px - 32px); /* match sidebar width minus padding */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #9ab4ff; /* Light theme background */
  color: #111827cc; /* Light theme text color */
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  font-size: 14px;
  z-index: 1000;
}

.sidebar-more-btn:hover {
  background-color: #b2c6ff;
}

/* Dark Theme Styles */
body.dark-theme .sidebar-more-btn {
  background: #1f2937;
  color: #ffffffcc;
}

body.dark-theme .sidebar-more-btn:hover {
  background-color: #374151;
}

.sidebar-more-btn .icon {
    font-size: medium;
    display: flex;
    gap: 10px;
    align-items: center;
}
@media screen and (max-width: 1024px) {
    .sidebar-more-txt {
        display: none;
    }
.sidebar-more-btn {
    left: 10px;
    width: unset;
}
	
}
.gamtha-more-wrapper {
  position: relative;
  width: 100%;
}

.gamtha-more-dropdown {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 300px;
    max-width: 90vw;
    max-height: max-content;
    height: 540px;
    overflow-y: auto;
    background: #f2f2f2;
    color: #111827;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 12px;
    z-index: 1001;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.gamtha-more-dropdown::-webkit-scrollbar {
  display: none;                 /* Chrome, Safari */
}

/* Dark Theme Support */
body.dark-theme .gamtha-more-dropdown {
  background-color: #1f2937; /* Tailwind Gray-800 */
  color: #ffffffcc;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Dropdown List */
.gamtha-more-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gamtha-more-dropdown ul li {
  padding: 11px 16pxs;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  font-size: 15px;
    margin: 0px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Link Styling */
.gamtha-more-dropdown ul li a {
  color: inherit;
  text-decoration: none;
  width: 100%;
    justify-content: flex-start;
  display: flex;
}

/* Hover Effect - Light */
.gamtha-more-dropdown ul li:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Hover Effect - Dark */
body.dark-theme .gamtha-more-dropdown ul li:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Active Show State */
.gamtha-more-dropdown.show-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Responsive Design */
@media (max-width: 480px) {
  .gamtha-more-dropdown {
    bottom: 60px;
    left: 20px;
  }
}