/*    background-image: url('images/123bno_banner1.png'); */
/*
/*
====================================
  COLOR & STYLE ADJUSTMENT GUIDE
====================================
- To change Header text/icon color, modify `color` in .fixed-header
- To change Footer color, modify `background-color` in .fixed-footer
- To change Main Body text color, modify `color` in body
*/

body {
    /* This color will show as a fallback if the image fails to load */
    background-color: #f4f4f9;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /*
    =================================================
      NEW CONTENT BODY BACKGROUND IMAGE
    =================================================
    */
    /* 1. Set the path to your image. */
    background-image: url('images/bg_tp3.jpg');

    /* 2. Make the background image fixed in place. It will not scroll with the content. */
    background-attachment: fixed;

    /* 3. Ensure the image covers the entire screen without repeating. */
    background-sizexx: cover;
    background-positionxx: center center;
    background-repeat: repeat;
}

.content-wrapper {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* --- HEADER --- */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    z-index: 1050;
    color: black;
    background-image: url('images/123bno_banner1.png');
    background-size: cover;
    background-position: center center;
}
.header-title { font-size: 1.2rem; font-weight: bold; }

/* Styles for the red hamburger button */
.header-menu-icon a {
    width: 44px;
    height: 40px;
    background-color: #dc3545;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease-in-out;
}
.header-menu-icon a:hover {
    background-color: #c82333;
    color: white;
}


/* --- FOOTER --- */
.fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #007bff;
    border-top: 1px solid #ddd;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: white;
    font-size: 1.0rem;   /* Adjust footer caption font size below the tiny icon */
    flex: 1;
}

/*
   ==================================================================
     Adjust footer top and bottom margin
   ==================================================================
*/
.footer-item i { 
    margin-bottom: 11px; 
    margin-top: 7px;
}
/*
   ==================================================================
     THE FIX: Change the hover color to something visible
     against the blue background. A light grey or a faded white
     provides a subtle but clear visual feedback.
   ==================================================================
*/
.footer-item:hover {
    color: #e9ecef; /* A light grey that looks great on a blue background */
}



/*
=================================================
  SIDEBAR STYLE ADJUSTMENTS (Preserved from your version)
=================================================
*/
.offcanvas {
    /*
        1) TO CHANGE THE WIDTH OF THE SIDEBAR:
        Modify the --bs-offcanvas-width variable.
        The default is 400px. You can use px, %, rem, etc.
        Example: --bs-offcanvas-width: 300px;
    */
    --bs-offcanvas-width: 250px;

    /*
        4) TO CHANGE THE BACKGROUND COLOUR OF THE SIDEBAR:
        Modify the background-color property below.
    */
    background-color: #343a40;
    color: #f8f9fa;
}
.offcanvas-header {
    border-bottom: 1px solid #495057;
}
.offcanvas-title {
    color: #f8f9fa;
}
/* This makes the 'X' close button white */
.offcanvas .btn-close {
    filter: invert(1) grayscale(100) brightness(200%);
}

/* Styling for ALL menu items in the sidebar */
.offcanvas .list-group-item {
    background-color: transparent;
    color: #f8f9fa;
    /*
        5) TO CHANGE THE DIVIDER LINE COLOR:
        Modify the border-bottom color property below.
    */
    border-bottom: 1px solid #495057; /* Thin line seperator */

    /*
        2) TO CHANGE THE HEIGHT/GAP BETWEEN MAIN MENU OPTIONS:
        Modify the padding-top and padding-bottom values.
        Increasing them will create more space.
    */
    padding-top: 0.5rem;    /* e.g., change to 1.2rem for more space */
    padding-bottom: 0.5rem; /* e.g., change to 1.2rem for more space */
}

/* Styling for the parent item of a sub-menu (e.g., "Products") */
.offcanvas a.list-group-item-action-main {
    text-decoration: none;
    color: #f8f9fa;
    display: block;
}

/* Styling for sub-menu items (e.g., "Gadgets") */
.offcanvas .sub-item {
    /*
        3) TO CHANGE THE HEIGHT/GAP BETWEEN SUB-MENU OPTIONS:
        Modify the padding-top and padding-bottom values here.
        By default, it inherits the padding from the main menu items.
        To make it smaller, you could add:
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    */
    padding-left: 2.5rem; /* Indent sub-items */
    font-size: 0.9em; /* Smaller font for sub-items */
}

/* Hover/focus effect for all menu items */
.offcanvas .list-group-item-action:hover,
.offcanvas .list-group-item-action:focus {
    background-color: rgba(255, 255, 255, 0.1);
}