/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent any scrolling */
}

/* Desktop Background */
#desktop {
    width: 100%;
    height: 100vh; /* Full height of the parent */
    background: url('https://i.pinimg.com/originals/43/66/64/4366644a9515f37e7bf463d394ec647d.jpg');
    background-size: cover;
    position: relative;
    overflow: hidden; /* Ensure no inner scrolling */
}


/* Taskbar */
#taskbar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    background-color: #333;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 10px; /* Only horizontal padding */
    color: white;
}

.start-menu {
    display: block;
    opacity: 1;
}
#start-menu-btn {
    cursor: pointer;
}


.start-menu img {
    width: 25px;
}

/* Search Bar Styling */
.search-bar {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 2px;
    width: 280px; /* Smaller width */
    padding: 5px;
    height: 40px;
    margin-left: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.search-bar img {
    width: 16px;
    margin-right: 5px;
}

.search-bar input {
    width: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    color: darkblack;
    font-size: 15px;
}

.search-bar input::placeholder {
    color: #888;
}

/* Taskbar Icons (File Explorer, Mail, etc.) */
.taskbar-icons {
    display: flex;
    margin-left: auto;  /* Pushes icons to the right */
    align-items: center;
}


.wifi-icon {
    width: 28px;
}

.sound-icon {
    width: 28px;
}

.battery-icon {
    width: 30px;
    margin-right: 8px;  /* Adjust spacing between icons */
    margin-top: 5px;
}

.clock-icon {
    width: auto;
    height: 30px;
    margin-right: 10px;  /* Adjust spacing between icons */
    margin-top: 15px;
    font-size: 14px;
    font-weight: bold;
    color: rgb(234, 229, 229);
}

.calendar-icon {
    width: auto;
    height: 30px;
    margin-right: 20px;  /* Adjust spacing between icons */
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
}
.notification-icon {
    width: 30px;
    border-radius: 50%; /* Round Notification icon */
    margin-right: 0px;  /* Adjust spacing between icons */
    margin-top: 10px;
}
/* Context Menu */
.context-menu {
    position: absolute;
    background-color: #333;
    color: whitesmoke;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000;
    min-width: 250px;
    height: calc(32px * 11); /* Adjust height based on the number of items */
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    padding: 5px 0;
}

.context-menu ul {
    list-style: none;
    padding: 5px 0;
    margin: 0;
}

.context-menu li {
    padding: 6px 20px;
    cursor: pointer;
    position: relative;
}

/* Chevron arrow indicator for items with submenus */
/* Chevron arrow indicator for items with submenus */
.context-menu li:has(.sub-menu)::after {
    content: '›'; /* Chevron symbol */
    position: absolute;
    right: 12px;
    font-size: 32px; /* Increase size */
    color: #b0b0b0; /* Light gray for Windows-like style */
    top: 30%; /* Center vertically */
    transform: translateY(-50%); /* Offset to align with center */
}


/* Underline effect for 'Refresh' on hover */
.context-menu li.refresh:hover {
    text-decoration: underline;
}

/* Sub-menu styling */
.sub-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #333;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    min-width: 180px;
    font-size: 14px;
    color: whitesmoke;
}

.context-menu li:hover .sub-menu {
    display: block;
}

/* Divider line to separate sections */
.context-menu .divider {
    border-top: 1px solid #d4d4d4;
    margin: 4px 0;
}

/* Nested menu hover styling */
.sub-menu li:hover {
    background-color: #0078d4;
    color: #ffffff;
}

/* Example hover effect */
.context-menu li:hover {
    background-color: #0078d4;
    color: #ffffff;
}

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* File Explorer Window */
.file-explorer-window {
    width: 750px;
    height: 350px;
    background-color: #fff;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: none;
    font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
}
/* Style for folders container */
#folders-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Aligns folders to the left */
    align-items: flex-start;     /* Aligns folders to the top */
    padding: 20px;
    gap: 20px;                   /* Spacing between folders */
    flex-grow: 1;                /* Allows the container to expand with window */
    overflow-y: auto;            /* Scroll if content overflows vertically */
}
.folder-item {
    position: relative;
    z-index: 10;  /* Ensure this is above any other UI elements */
}

/* Style for individual folders */
.folder {
    width: 100px;
    height: 100px;
    background-color: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 8px;
}

/* Title Bar */
.title-bar {
    background-color: #fbfbfb; /* Windows 10 blue */
    color: rgb(81, 79, 79);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px 5px 0 0;
    font-size: 10px;
    font-weight: 500;
}

.window-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Windows 10 uses Segoe UI font */
    font-weight: bold; /* Make the text bold like folder titles */
    font-size: 14px; /* Typical font size for folder names */
    color: #1a1a1a; /* Default dark color for folder text */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.25); /* Light shadow effect for better readability */
    user-select: none; /* Prevent text selection like in Windows Explorer */
  }
  

.title-bar-buttons button {
    background-color: transparent;
    border: none;
    color: rgb(23, 23, 23);
    font-size: 16px;
    margin-left: 8px;
    cursor: pointer;
}

.title-bar-buttons button:hover {
    background-color: #d6cfcf;
    border-radius: 3px;
}

/* New Menu Bar (File, Home, Share, View) */
.menu-bar {
    background-color: #f1f1f1;
    display: flex;
    border-top: 1px solid #ccc;
    padding: 8px;
}

.menu-item {
    background-color: transparent;
    border: none;
    font-size: 16px;
    color: #0078d4;
    padding: 5px 15px;
    cursor: pointer;
    text-align: center;
}

.menu-item:hover {
    background-color: #e0e0e0;
}

/* Toolbar */
.toolbar {
    display: flex;
    background-color: #f1f1f1;
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;
    justify-content: space-between;
}

.toolbar-left button {
    background-color: transparent;
    border: none;
    font-size: 16px;
    color: #0078d4;
    margin-right: 10px;
    cursor: pointer;
}

.toolbar-left button:hover {
    background-color: #d6e2f0;
}

.address-bar {
    flex-grow: 1;
}

.address-input {
    width: 100%;
    padding: 5px;
    font-size: 14px;
    color: #333;
    border: 1px solid #ccc;
    background-color: #fff;
}

/* Left Navigation Pane */
.navigation-pane {
    width: 200px;
    background-color: #f1f1f1;
    padding: 15px;
    border-right: 1px solid #ccc;
}

.nav-item {
    padding: 8px 0;
    font-size: 14px;
    cursor: pointer;
    color: #000;
}

.nav-item:hover {
    background-color: #e4e9f1;
}
/* Folder/Grid Container */





.folder-item:hover {
    background-color: #e0e0e0;
}

.folder-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
    
}

.folder-item span {
    font-size: 14px;
}

/* Status Bar */
.status-bar {
    background-color: #f1f1f1;
    padding: 10px;
    text-align: left;
    border-top: 1px solid #ccc;
    color: #555;
}

/* Buttons (Minimize, Maximize, Close) */
.minimize-btn, .maximize-btn, .close-btn {
    font-size: 16px;
    color: rgb(0, 0, 0);
    cursor: pointer;
    padding: 3px;
}
.minimize-btn {
    font-size: 18px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: black; /* Default color */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for background and color */
}
.minimize-btn:hover, .maximize-btn:hover, .close-btn:hover {
    background-color: #878686;
    border-radius: 6px;
}

.close-btn {
    color: #d83b01;
}

.close-btn:hover {
    background-color: #a80000;
}
/* Left Navigation Pane */
.navigation-pane {
    width: 200px;
    background-color: #f1f1f1;
    padding: 15px;
    border-right: 1px solid #ccc;
    display: flex;
    flex-direction: column;
}

.nav-item {
    padding: 8px 0;
    font-size: 14px;
    cursor: pointer;
    color: #000; /* Black text for items */
}

.nav-item:hover {
    background-color: #e4e9f1;
}

/* Divider Line */
.divider {
    border-top: 1px solid #ccc;
    margin: 10px 0;
}

/* Drives Section Title */
.drives-title {
    font-weight: bold;
    padding: 10px 0;
}
/* Main File Explorer Content */
.file-explorer-content {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

/* Left Navigation Pane */
.navigation-pane {
    width: 250px;  /* Width of the sidebar */
    background-color: #f1f1f1;
    padding: 15px;
    border-right: 1px solid #ccc;
    display: flex;
    flex-direction: column;
}

.nav-item {
    padding: 8px 0;
    font-size: 14px;
    cursor: pointer;
    color: #000; /* Black text for items */
}

.nav-item:hover {
    background-color: #e4e9f1;
}


/* Folder and File Items */
.folder-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.folder-item img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.folder-item span {
    font-size: 14px;
}


.drive-item:hover {
    background-color: #e4e9f1;
    padding: 5px;
    border-radius: 5px;
}

/* Folder and File Items */
.folder-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.folder-item img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.folder-item span {
    font-size: 14px;
}
/* File View - Horizontal Layout */
.file-view {
    display: flex;                    /* Flexbox layout for side-by-side items */
    flex-wrap: wrap;                   /* Allow items to wrap if necessary */
    gap: 20px;                            /* No gap between images */
    padding: 0;                        /* Remove any padding */
    margin: 0;                         /* Remove any margin */
    justify-content: flex-start;       /* Align images to the left */
    width: 100%;                       /* Full width of the container */
    max-width: 100%;  
    margin-top: -150px;
    align-items: center;                 
}

#pictures-container {
    display: flex;                    /* Flexbox layout for side-by-side items */
    flex-wrap: wrap;                   /* Allow items to wrap if necessary */
    gap: 0;                            /* No gap between images */
    padding: 0;                        /* Remove any padding */
    margin: 0;                         /* Remove any margin */
    justify-content: flex-start;       /* Align images to the left */
    width: 100%;                       /* Full width of the container */
    max-width: 100%;                   /* Optional: Remove any max-width to ensure it stretches */
}

.folder-item {
    display: flex;                   /* Flexbox inside each folder item */
    flex-direction: column;          /* Stack image and text vertically */
    align-items: center;             /* Center the content (image and text) */
    cursor: pointer;                /* Pointer cursor on hover */
    width: 100px;                    /* Fixed width for each item */
    margin: 0;                       /* Remove margin */
    padding: 0;                      /* Remove padding */
    text-align: center;              /* Center the text */
}

.folder-item img {
    width: 30px; /* Folder icon size */
    height: 30px;
    width: 40%;
    height: auto;
    display: block;
    margin-top: 25px;
    
}

.folder-item span {
    font-size: 14px;
    color: #000; /* Black text for item names */
}
.desktop-icon {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    width: 80px; /* Set width similar to Windows desktop icon width */
    padding: 10px 0; /* Add vertical padding to space items */
    text-align: center; /* Center align text */
    user-select: none; /* Prevent text selection */
}

.desktop-icon img {
    width: 32px; /* Icon size close to Windows 10 desktop icon */
    height: 32px;
    margin-bottom: 5px; /* Space between icon and text */
    transition: all 0.2s ease; /* Smooth transition on hover */
}

.desktop-icon:hover img {
    width: 36px; /* Slight increase on hover */
    height: 36px;
}

.desktop-icon p {
    font-family: 'Segoe UI', Tahoma, Geneva, sans-serif; /* Windows 10 font */
    font-size: 9.5px; /* Similar font size to Windows 10 icon text */
    color: white; /* White text color like Windows desktop */
    font-weight: normal;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8); /* Shadow for readability */
    margin: 0; /* Remove extra margin */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Modal Styling */
/* Modal Styling */
/* Modal Styling */
#image-viewer-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Keeps the modal centered */
    width: 900px; /* Set width */
    height: 600px; /* Set height */
    background-color: #2a2a2a;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers everything inside */
    border-radius: 0px; /* Straight edges for the container */
}

/* Modal Content */
.modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Header */
/* Modal Header */
.modal-header {
    background-color: #333; /* Solid background for the header */
    width: 100%;
    padding: 10px;
    text-align: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Windows-style font */
    font-size: 16px; /* More Windows-like font size */
    position: relative;  /* Changed from absolute to relative */
    z-index: 1; /* Ensure it's above the image viewer */
    color: white;
    font-weight: normal;
    letter-spacing: 0.5px; /* Slight spacing to match Windows font appearance */
}

/* Heading Title */
.modal-header h2 {
    margin: 0;
    font-family: "Segoe UI Semibold", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Specific Semibold font for heading */
    font-size: 16px; /* Slightly larger text for the title */
    font-weight: 600; /* Semibold weight */
    letter-spacing: 0.5px; /* Refined spacing for better legibility */
}


/* Window Controls (Top Right) */
/* Window Controls */
.window-controls {
    position: absolute;
    top: 8px;
    right: 10px;
    display: flex;
    gap: 15px; /* Ensures equal spacing between buttons */
    z-index: 2;
}

.window-controls button {
    background-color: transparent; /* No background */
    color: #ccc; /* Icon color */
    border: none; /* No border */
    padding: 0; /* No padding */
    font-size: 16px; /* Consistent icon size */
    cursor: pointer;
    display: flex; /* Ensure icons are centered */
    align-items: center;
    justify-content: center;
    width: 20px; /* Fixed width for all buttons */
    height: 20px; /* Fixed height for all buttons */
    border-radius: 50%; /* Optional: adds a rounded shape */
}

.window-controls button:hover {
    color: #fff; /* Change color on hover */
}

/* If using SVG icons inside the buttons */
.window-controls button svg {
    width: 16px; /* Ensure icons are consistent in size */
    height: 16px;
    fill: currentColor; /* Ensures the icon color matches the button color */
}

#zoom-percentage {
    font-size: 18px;
    margin: 0 10px;
    margin-top: 8px;
}

/* Image Viewer */
#image-viewer {
    max-width: 100%;
    max-height: 80%; /* Allow some space for the header */
    transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
    transform-origin: center center;
    object-fit: contain;
    cursor: grab;
    user-select: none;
    position: relative;
    margin-top: 20px; /* Space between the header and the image */
    margin-bottom: 20px; /* Space between the image and the toolbar */
}

/* Image Viewer Toolbar */
.image-viewer-toolbar {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
    z-index: 2;
}

.image-viewer-toolbar button {
    background-color: #444;
    color: #ccc;
    border: none;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}

.image-viewer-toolbar button:hover {
    background-color: #555;
}
/* Container and Header Styling */
.iframe-container {
    position: relative;
    width: 90vw;
    height: 70vh;
    border: 1px solid #ccc;
}

.iframe-header {
    display: flex;
    justify-content: flex-end;
    background-color: rgba(241, 241, 241, 0.8); /* Semi-transparent */
    padding: 4px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}


.iframe-header button {
    border: none;
    background: none;
    padding: 0 10px;
    cursor: pointer;
    font-size: 14px;
}

.iframe-header button:hover {
    background-color: #ddd;
}

#iframe {
    width: 100%;
    height: calc(100% - 30px); /* Adjust for header height */
}
.chrome-close-btn {
    position: absolute;
    top: -6px; /* Adjust as needed for vertical alignment */
    right: 2px; /* Adjust as needed for horizontal alignment */
    background: none;
    border: none;
    padding: 4px 8px; /* Adds padding for box shape */
    font-size: 16px;
    color: gray; /* Adjust color to suit your design */
    cursor: pointer;
    border-radius: 3px; /* Slightly rounded corners */
    transition: background-color 0.2s; /* Smooth hover transition */
}
.chrome-close-btn:hover {
    border: 1px solid #ccc; /* Adds a subtle border to match Windows style */
    color: whitesmoke; /* Red color on hover */
    background-color: rgb(199, 44, 44);
}
/* Basic styles for both mobile and desktop */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .file-explorer, .picture-viewer {
    width: 100%;
    max-width: 300px;
    margin: 10px;
  }
  
  /* For desktop and larger screens */
  @media (min-width: 768px) {
    .file-explorer, .picture-viewer {
      width: 45%; /* Adjust to fit two elements side by side */
    }
  }
  
  /* For mobile screens */
  @media (max-width: 767px) {
    #desktop {
        background-position: center; /* Ensure image is centered */
       
    }
}

@media (max-width: 768px) {
    /* Adjust width and height for mobile */
    .wifi-icon {
        width: 14px;
        margin-right: 10px;
        margin-top: 4px;
    }
    
    .sound-icon {
        width: 14px;
        margin-top: 4px;
        margin-right: 10px;
    }
    .notification-icon {
        width: 14px;
        border-radius: 50%; /* Round Notification icon */
        margin-right: 0px;  /* Adjust spacing between icons */
        margin-top: 10px;
    }
    
    .battery-icon {
        width: 14px;
        margin-right: 10px;  /* Adjust spacing between icons */
       
    }
    .clock-icon {
        width: 14px;
        height: 30px;
        margin-right: 10px;  /* Adjust spacing between icons */
        margin-top: 20px;
        font-size: 6px;
        font-weight: bold;
        color: rgb(234, 229, 229);
    }
    .search-bar {
        display: flex;
        align-items: center;
        background-color: white;
        border-radius: 2px;
        width: 180px; /* Smaller width */
        padding: 5px;
        height: 40px;
        margin-left: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    .context-menu {
        position: absolute;
        background-color: #333;
        color: whitesmoke;
        border: 1px solid #d4d4d4;
        border-radius: 3px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        display: none;
        z-index: 1000;
        min-width: 140px;
        height: calc(24px * 11); /* Adjust height based on the number of items */
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 8px;
        padding: 0px 0;
    }
    .sub-menu {
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
        background-color: #333;
        border: 1px solid #d4d4d4;
        border-radius: 3px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        min-width: 120px;
        font-size: 8px;
        color: whitesmoke;
    }
    .context-menu li:has(.sub-menu)::after {
        content: '›'; /* Chevron symbol */
        position: absolute;
        right: 12px;
        font-size: 18px; /* Increase size */
        color: #b0b0b0; /* Light gray for Windows-like style */
        top: 30%; /* Center vertically */
        transform: translateY(-50%); /* Offset to align with center */
    }
    /* File View - Horizontal Layout */
/* Mobile responsiveness */
@media (max-width: 768px) {
    .file-view {
    display:contents;
    
       
    }
}  


}
#paint-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}
.tools {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}
.app-header {
    background-color: #ddd;
    padding: 5px;
    display: flex;
    justify-content: flex-end;
}
#paint-app {
    position: relative;
    width: 600px;
    border: 2px solid #333;
}
.app-title {
    font-size: 16px;
    font-weight: bold;
    padding :0px 2px;
    margin-right: auto; /* Push the title to the left */
}

.app-header button {
    background: none; /* Removes button background */
    border: none; /* Removes the button border */
    color: #000; /* Sets button text color */
    font-size: 16px;
    cursor: pointer; /* Makes buttons clickable */
    margin-left: 10px; /* Adds space between buttons */
}

.menu-subheading {
    margin-top: 5px;
    display: flex;
    gap: 6px;
}

.menu-subheading button {
    padding: 0px 2px;
    font-size: 12px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.menu-subheading button:hover {
    background-color: #e1e1e1;
}
@media (max-width: 768px) {
    #paint-container {
        width: 90vw;
        height: 80vh;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #paint-app {
        width: 100%;
        height: 100%;
        border: none;
    }
    #paint-canvas {
        width: 100%;
        height: 80%;
    }
}
.file-icon {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 5px;
    cursor: pointer;
    background-color: #f0f0f0;
    border-radius: 5px;
    text-align: center;
    line-height: 80px;
}

.file-icon-img {
    width: 50px;
    height: 50px;
}
/* Style for the desktop icon */
.desktop-icon {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
    text-align: center;
  }
  
  /* Centered Notepad Window */
  .notepad-window {
    display: none; /* Initially hidden */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background-color: #f4f4f4; /* Light background */
    border: 1px solid #ccc;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    font-family: Arial, sans-serif;
    z-index: 999;
  }
  /* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .notepad-window {
        width: 90%; /* Make it almost full width */
        height: 70vh; /* Use viewport height to make it dynamic */
    }
    .window-header span {
        color: black; /* Set text color to black */
     margin-right: -280px;
        font-size: 16px;
        font-weight:2900; /* Adjust font size if needed for readability */
    }
   
}


  /* Window Header */
  .window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background-color: whitesmoke;
    color: rgb(49, 48, 48);
    font-weight: lighter;
  }
  
  .close-btn1 {
    background: none;
    border: none;
    color: rgb(49, 48, 48);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px; /* Adds padding for box shape */
    border-radius: 3px; /* Slightly rounded corners */
    transition: background-color 0.2s; /* Smooth hover transition */
  }
  .close-btn1:hover {
    background-color: grey;
    color: white;
    border: 1px solid #ccc; /* Adds a subtle border to match Windows style */
}
  /* Menu Bar */
  .menu-bar1 {
    display: flex;
    background-color:whitesmoke; /* Light gray background */
    padding: 5px 0;
    font-size: 12px;
   color:  rgb(49, 48, 48);
   font-weight: lighter;
    border-bottom: 1px solid #ccc;
  }
  
  .menu-item1 {
    margin: 0 6px;
    cursor: pointer;
    padding: 0px;
  }
  
  .menu-item1:hover {
    background-color: #c6c6c6; /* Hover effect */
    border-radius: 3px;
  }
  
  /* Text Area */
  textarea#notepadTextArea {
    width: 100%;
    height: calc(100% - 90px); /* Adjusted for header and menu bar */
    padding: 10px;
    font-size: 14px;
    font-family: Consolas, monospace; /* Monospace font for a notepad feel */
    background-color: #fff;
    border: none;
    resize: none;
    outline: none;
    color: #000;
  }
  
  textarea#notepadTextArea:focus {
    background-color: white; /* Light gray background when focused */
  }
  .notepad-icon {
    width: 20px; /* Adjust size if needed */
    height: 20px;
    margin-right: -470px; /* Reduce space between icon and text */
}

/* Ensure the file container uses flexbox to align items */
.documents-folder-container {
    display: flex;
    flex-wrap: wrap; /* Items wrap to the next line if necessary */
    justify-content: flex-start; /* Align items to the left */
    align-items: flex-start; /* Align items to the top */
    gap: 20px; /* Add some space between items */
}

/* Folder items container */
.documents-folder-container .folder-item {
    display: flex;
    flex-direction: column; /* Arrange image and text vertically */
    align-items: center; /* Center the icon and text */
    cursor: pointer; /* Show pointer cursor on hover */
    text-align: center; /* Center the text under the image */
}

/* Folder item icon (image) size */
.documents-folder-container .folder-item img {
    width: 50px; /* Adjust the size of the folder icons */
    height: 50px;
    margin-bottom: 10px; /* Space between image and text */
}

/* Optional: Style the text (span) under each image */
.documents-folder-container .folder-item span {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
/* Preloader Styling */

/* Preloader Styling */
/* Preloader Styles */
/* Main Preloader Container */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000; /* Black background like Windows */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Optionally disable pointer events when hidden */
}

.preloader-container {
    text-align: center;
    color: #fff;
    position: relative;
}

/* Windows Logo */
.windows-logo {
    width: 75px; /* Adjust size */
    margin-bottom: 155px;
}

/* Circular Dots Animation */
.loader-circle {
    position: absolute;
    bottom: -50px; /* Move dots a little lower */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Adjust gap between dots */
    position: relative;
    width: 40px; /* Adjust the radius of the circle */
    height: 40px;
}

.loader-circle .circle {
    width: 6px; /* Smaller dots */
    height: 6px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    animation: rotateCircle 1.5s infinite linear;
}

/* Dots positioned in a circular motion */
.loader-circle .circle:nth-child(1) {
    animation-delay: -0.9s;
    transform: rotate(0deg) translateX(18px);
}

.loader-circle .circle:nth-child(2) {
    animation-delay: -0.6s;
    transform: rotate(60deg) translateX(18px);
}

.loader-circle .circle:nth-child(3) {
    animation-delay: -0.3s;
    transform: rotate(120deg) translateX(18px);
}

.loader-circle .circle:nth-child(4) {
    animation-delay: 0s;
    transform: rotate(180deg) translateX(18px);
}

.loader-circle .circle:nth-child(5) {
    animation-delay: -1.2s;
    transform: rotate(240deg) translateX(18px);
}

.loader-circle .circle:nth-child(6) {
    animation-delay: -0.9s;
    transform: rotate(300deg) translateX(18px);
}

/* Spinning Animation Keyframes */
@keyframes rotateCircle {
    0% {
        transform: rotate(0deg) translateX(18px);
    }
    100% {
        transform: rotate(360deg) translateX(18px);
    }
}

/* Fade-in effect for preloader text */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.preloader-text {
    font-size: 1rem;
    margin-top: 20px;
    font-family: Arial, sans-serif;
    animation: fadeIn 2s ease-in-out;
    color: rgba(255, 255, 255, 0.8);
}


/* Left Section to push items at the bottom */
.left-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align items to the bottom */
    margin-top: auto; /* Ensures that menu items are at the bottom */
}

.start-menu-container {
display: none;
    position: fixed;
    left: 10px;
    bottom: 50px;
    background: #2c2c2c;
    border-radius: 10px;
    width: 650px;
    padding: 10px;
    display: none; /* Initially hidden */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    animation: slide-up 0.3s ease-in-out;
}
/* Animation */
@keyframes slide-up {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header and User Info */
/* Header */
.start-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.start-header .user-info {
    display: flex;
    align-items: center;
}


.start-header .user-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
#close-start {
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.start-header button {
    background: transparent;
    color: white;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

#start-menu-btn {
    position: relative;
    z-index: 1000; /* Adjust as necessary */
}

/* Main Content (Left, Middle, Right) */
.start-menu-content {
    display: flex;
    width: 80%;
    justify-content: space-between;
}
/* Left Section */
.left-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.left-section .menu-item {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: white;
    background-color: transparent;
    border-radius: 5px;
    transition: all 0.3s ease;
    overflow: hidden;
    width: 50px;
}
.left-section .menu-item {
    pointer-events: auto;
}


.left-section .menu-item img {
    width: 20px;
    margin-right: 10px;
}

.left-section .menu-item:hover {
    background-color: #333;
    width: 130px;
}

.left-section .menu-item:hover span {
    visibility: visible;
    opacity: 1;
}

.left-section .menu-item span {
    margin-left: 10px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
}
/* Power Options */
.power-options {
    display: none;
    position: absolute;
    width:200px;
    bottom: 65px;
    left: 10px;
    background-color: #2c2c2c;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
.power-options ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.power-options ul li {
    padding: 10px;
    cursor: pointer;
    color: white;
    transition: background-color 0.3s ease;
}

.power-options ul li:hover {
    background-color: #0078d4;
}


/* Mobile Adjustments */
@media (max-width: 768px) {
    .start-menu-container {
        width: 90%;
        bottom: 10px;
    }
}
/* Middle Section: Apps List */
.middle-section {
    width: 100%; /* Full width of the container */
    padding: 20px;
    color: white;
    display: flex;
    flex-direction: column; /* Stack header and apps list */
    align-items: flex-start; /* Align content closer to the left */
    gap: 10px; /* Space between header and apps list */
    box-sizing: border-box;
    margin-left: 20px; /* Adjust distance from the left container */
}

.middle-section h3 {
    font-size: 16px;
    margin: 0;
    font-weight: bold;
    color: #d1d1d1; /* Light color for section title */
    text-align: left; /* Align header to the left */
    width: 100%; /* Full width of header */
    margin-bottom: 10px; /* Space between header and grid */
}

/* Apps List */
#apps-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Two columns for app tiles */
    gap: 15px; /* Space between grid items */
    padding: 0;
    margin: 0;
    width: 100%; /* Full width of the grid */
}

/* App item styling */
.app-item {
    background-color: #3a3a3a; /* Background color */
    border-radius: 6px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    color: #d1d1d1; /* Light color for text */
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* App item hover effect */
.app-item:hover {
    background-color: #0078d4; /* Blue background on hover */
    color: white; /* White text color on hover */
    transform: scale(1.05); /* Slight zoom-in effect on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Stronger shadow on hover */
}

/* App icon images inside items */
.app-item img {
    display: block;
    margin: 0 auto 10px; /* Center the image and add spacing below */
    width: 30px; /* Adjust size of icons */
    height: 30px;
    margin-bottom: 10px;
    filter: brightness(0.8); /* Slightly dimmed icon */
    transition: filter 0.3s ease; /* Smooth transition */
}

/* Hover effect on icons */
.app-item:hover img {
    filter: brightness(1); /* Full brightness when hovered */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .middle-section {
        margin-left: 10px; /* Reduce spacing for smaller screens */
    }

    #apps-list {
        grid-template-columns: repeat(2, 1fr); /* Maintain 2 columns */
        gap: 10px; /* Reduce gap */
    }

    .app-item {
        font-size: 10px;
        padding: 10px;
    }

    .app-item img {
        width: 30px;
        height: 30px;
    }
}

.search-results-container {
    position: absolute;
    top: 40px;
    left: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.search-results-container ul {
    list-style: none;
    margin: 0;
    padding: 10px;
}

.search-results-container li {
    padding: 10px;
    cursor: pointer;
}

.search-results-container li:hover {
    background-color: #f0f0f0;
}