*   {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
:root   {
            --orange-color: #E67E22;
            --Beige-color:  #F5F5F5;
            --nude-color:   #C8AD7D;
            --brown-color:  #3D3D3D;
            --black-color:  RGB( 0, 0, 0 );
            --white-color:  RGB( 255, 255, 255 );
            --border-color: RGB( 220, 220, 220 );
            --text-gray-color: RGB( 180,180,180 );
            --background-gray-color: RGB( 235, 235, 235 );
        } 
body{
        font-family: Arial, Helvetica, sans-serif;
        overflow-y: auto;
        overflow-x: hidden;
    }
body::-webkit-scrollbar {
                            width: 4px;
                            background-color: var( --Beige-color );
                        }
body::-webkit-scrollbar-thumb   {
                                    background-color: var( --nude-color );
                                }
a, a:focus, a:hover, a:active, a:visited { text-decoration: none; color: black; }

/* html styling */
    /* Horizontal Menu Board */
    #HorizontalMenuBoard    {
                                height: 76px;
                                background-color: transparent;
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                justify-content: space-evenly;
                                gap: 16px;
                            }
        #HorizontalMenuBoard a > div    {
                                            font-weight: bold;
                                            color: var(--brown-color);
                                            background-color: transparent;
                                            padding: 8px 16px 8px 16px;
                                            border: solid 0 transparent;
                                            border-radius: 8px;
                                        }
        #HorizontalMenuBoard a > div:hover  {
                                                color: var(--white-color);
                                                background-color: var(--nude-color);
                                            }

/* Index html styling */
    /* Content Board */
    .ContentBoard   {
                        background-color: var(--white-color);
                        position: relative;
                        z-index: 1;
                    }

    /* Poster Board */
    #PosterBoard    {
                        height: 60vh; width: 100%;
                        background-color: white;
                        position: relative;
                        overflow: hidden;
                    }
        #PosterBar  {
                        position: relative;
                        width: 100%; height: 100%;
                        background-color: transparent;
                        overflow: hidden;
                    }
            .PosterSlideBar {
                                height: 100%; width: 100%;
                                background-position: right top;
                                background-repeat: no-repeat;
                                background-size: cover;
                                position: absolute;
                                display: flex;
                                align-items: last baseline;
                                transition: transform 0.6s ease-in-out;
                            }
                .PosterSlideTextBar {
                                        text-align: center;
                                        width: 50%;
                                        margin-left: 36px;
                                        margin-bottom: 36px;
                                    }
                    .PosterSlideTextBar h1  {
                                                font-size: 36px;
                                                font-weight: bold;
                                                margin: 0;
                                            }
                    #PosterSlideText0   { color: var(--orange-color); }
                    #PosterSlideText1   {
                                            color: black;
                                            text-shadow: 0 0px 2px var(--white-color);
                                        }
                    #PosterSlideText2   { color: var(--Beige-color); }
                    #PosterSlideText3   { color: var(--Beige-color); }
                    .PosterSlidebutton  {
                                            font-weight: bold;
                                            padding: 16px 16px 16px 18px;
                                            border: solid 0 transparent;
                                            border-radius: 8px;
                                        }
                    .PosterSlidebutton:hover    {
                                                    color: white;
                                                    background-color: var(--brown-color);
                                                }
        #PosterIndicatorBar {
                                position: absolute;
                                top: 8px;
                                left: 8px;
                                display: flex;
                                align-items: center;
                                gap: 6px;
                            }
            .PosterIndicatorSpan    {
                                        width: 12px;
                                        height: 12px;
                                        border-radius: 50%;
                                        background: var(--Beige-color);
                                        opacity: 0.8;
                                        border: 2px solid var(--border-color);
                                        cursor: pointer;
                                        transition: all 0.3s;
                                    }
            .PosterIndicatorSpan.active {
                                            height: 24px;
                                            width: 24px;
                                            border-radius: 6px;
                                            border: 2px solid var(--orange-color);
                                        }

    /* ParallaxBoard */
    .ParallaxBoard  {
                        height: 70vh;
                        background-size: cover;
                        background-position: top center;
                        background-repeat: no-repeat;
                        background-attachment: fixed;
                        display: flex;
                    }
    .ParallaxBoard.image_one    {
                                    background-image: url("../assets/parallax_images/parallax_first_img.png");
                                }
    .ParallaxBoard.image_two    {
                                    background-image: url("../assets/parallax_images/parallax_second_img.png");
                                }
        .ParallaxBoard h1   {
                                font-size: 36px;
                                font-weight: bold;
                                color: var(--nude-color);
                                margin-top: auto;
                                margin-bottom: 36px;
                                margin-left: 56px; margin-right: 56px;
                                text-shadow: 0 0px 4px var(--brown-color);
                            }
                                    
    /* Category Board */
    #CategoryBoard  {
                        height: fit-content;
                        background-color: var(--Beige-color);
                        padding: 66px 8px 66px 8px;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: center;
                        gap: 26px;
                    }
        #CategoryBoard a    {
                                width: clamp( 250px, 50%, 400px );
                                min-width: 250px; max-width: 400px;
                            }
        .CategoryBar    {
                            height: 200px; width: 100%;
                            background-color: transparent;
                            position: relative;
                            overflow: hidden;
                        } 
            .CategoryBar img    {
                                    height: 100%; width: 100%;
                                    object-fit: cover;
                                    object-position: center;
                                    border: solid 0 transparent;
                                    border-radius: 8px;
                                }
            .CategoryDetailsBar {
                                    width: 100%;
                                    color: white;
                                    background-color: transparent;
                                    padding: 0 16px 0 16px;
                                    position: absolute;
                                    left: 0; bottom: 16px; right: 0;
                                    display: flex;
                                    flex-direction: row;
                                    flex-wrap: wrap;
                                    align-items: center;
                                    justify-content: space-between;
                                    gap: 10px;
                                }
                .CategoryDetailsBar p   {
                                            font-size: 18px;
                                            font-weight: bold;
                                        }
                .CategoryDetailsBar button  {
                                                font-weight: bold;
                                                color: var(--brown-color);
                                                padding: 8px 16px 8px 16px;
                                                border: solid 0 transparent;
                                                border-radius: 8px;
                                            }
                .CategoryDetailsBar button:hover    {
                                                        color: var(--white-color);
                                                        background-color: var(--brown-color);
                                                    }

    /* Product Board */
    .ProductBoard   {
                        background: linear-gradient( to bottom, var( --white-color ), var( --Beige-color ) );
                        padding: 46px 0 46px 0;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }
        /* Product Title Bar */
        .ProductTitleBar    {
                                width: 100%;
                                font-size: 36px;
                                font-weight: bold;
                                color: var(--nude-color);
                                padding-left: 46px;
                                margin-bottom: 36px;
                            }
        /* Product Details Bar */
        .ProductDetailsSubBar  {
                                width: clamp( 250px, 100%, 1000px );
                                min-width: 250px; max-width: 1000px;
                                background-color: transparent;
                                padding:0 16px 0 16px;
                                margin-bottom: 36px;
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                justify-content: center;
                                gap: 16px;
                            }

        /* Product Item Bar */
            .ProductItemBar {
                                    width: clamp( 250px, 32%, 400px );
                                    min-width: 250px; max-width: 400px;
                                    aspect-ratio: 3/4;
                                    position: relative;
                                    display: flex;
                                    flex-direction: column;
                                }
                .ProductImgBar   {
                                            flex-grow: 1;
                                            background-color: transparent;
                                            margin-bottom: 10px;
                                            position: relative;
                                        }
                    .ProductImg  {
                                            height: 100%; width: 100%;
                                            object-fit: cover; object-position: center;
                                            border: solid 0 transparent;
                                            border-top-right-radius: 8px; border-top-left-radius: 8px;
                                        }
                    .ProductSpan {
                                            background-color: var(--background-gray-color);
                                            padding: 4px 8px 4px 8px;
                                            border: solid 0 transparent;
                                            border-radius: 8px;
                                            position: absolute;
                                            top: 8px; left: 8px;
                                            opacity: 0.7;
                                        }
                    .ProductIcon {
                                            height: 26px; width: 26px;
                                            position: absolute;
                                            top: 8px; right: 8px;
                                            opacity: 0.7;
                                        }
                    .ProductPackageSpan  {
                                                    color: var(--white-color);
                                                    background-color: rgba( 230, 126, 34, 0.6 );
                                                    padding: 4px 8px 4px 8px;
                                                    border: solid 0 transparent;
                                                    border-radius: 8px;
                                                    position: absolute;
                                                    bottom: 8px; left: 8px;
                                                }
                    .ProductViewImg {
                                                            height: 36px; width: 36px;
                                                            border: solid 0 transparent;
                                                            border-radius: 8px;
                                                            position: absolute;
                                                            bottom: 8px; right: 8px;
                                                            opacity: 0.5;
                                                        }
                    .ProductViewImg:hover  {
                                                                        opacity: 1;
                                                                    }
                    .ProductRemoveImg  {
                                                            height: 36px; width: 36px;
                                                            border: solid 0 transparent;
                                                            border-radius: 8px;
                                                            position: absolute;
                                                            top: 8px; left: 8px;
                                                            opacity: 0.5;
                                        }
                    .ProductRemoveImg:hover {
                                                opacity: 1;
                                            }
                    /*
                    .ProductButton   {
                                                background-color: var(--Beige-color);
                                                padding: 4px 8px 4px 8px;
                                                border: solid 0 transparent;
                                                border-radius: 8px;
                                                position: absolute;
                                                bottom: 8px; right: 8px;
                                                opacity: 0.7;
                                            }
                    .ProductButton:hover {
                                                    color: var(--white-color);
                                                    background-color: var(--brown-color);
                                                }
                    */
                .ProductDetailsBar   {
                                                font-weight: bold;
                                                background-color: transparent;
                                                margin-bottom: 36px;
                                            }
                    .ProductDetailsTitleText        {
                                                        font-size: 18px;
                                                        margin-bottom: 6px;
                                                    }
                    .ProductDetailsPriceText        {
                                                        font-size: 18px;
                                                        color: var(--orange-color);
                                                        margin-left: 16px;
                                                    }
                    .ProductItemTotal   {
                                            font-size: 18px;
                                            color: var(--nude-color);
                                            margin-top: 9px;
                                        }
                .ProductButtonBar    {
                                                text-align: center;
                                                margin-bottom: 8px;
                                            }
                    .ProductButton   {
                                                font-size: 18px;
                                                font-weight: bold;
                                                padding: 8px 16px 8px 16px;
                                                color: var(--brown-color);
                                                background-color: transparent;
                                                border: solid 0 transparent;
                                                border-radius: 8px;
                                            }
                    .ProductButton:hover    {
                                                color: var(--white-color);
                                                background-color: var(--brown-color);
                                            }
    /* Cart Board */
        /* Cart Title Bar */
        #CartTitleBar   {
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            padding-right: 46px;
                            justify-content: space-between;
                            column-gap: 26px; row-gap: 16px;
                        }
            /*  */
            /* Cart Title Options Bar */
            #CartTitleOptionsBar    {
                                        display: flex;
                                        flex-direction: row;
                                        flex-wrap: nowrap;
                                        align-items: center;
                                        justify-content: center;
                                        gap: 16px;
                                    }
                #CartTitleOptionsBar p  {
                                            font-size: 26px;
                                            color: var(--orange-color);
                                            margin-top: 10px;
                                        }
                #CartOptionsBar {
                                    display: flex;
                                    flex-direction: row;
                                    justify-content: center;
                                    gap: 16px;
                                }
                    #CartTitleOptionsBar button {
                                                    font-size: 18px;
                                                    font-weight: bold;
                                                    background-color: transparent;
                                                    padding: 8px 16px 8px 16px;
                                                    border: solid 2px var(--nude-color);
                                                    border-radius: 8px;
                                                }
                    #CartTitleOptionsBar button:hover   {
                                                            color: var(--white-color);
                                                            background-color: var(--orange-color);
                                                            border-color: var(--orange-color);
                                                        }
                    #CartOptionsBar button  {
                                                padding-right: 36px; padding-left: 36px;
                                            }
                    #ClearCartButton    {
                                            color: var(--text-gray-color);
                                            background-color: transparent;
                                            border-color: transparent;
                                        }
                    #ClearCartButton:hover  {
                                                color: var(--white-color);
                                                background-color: var(--brown-color);
                                                border-color: var(--brown-color);
                                            }
                    

        /* Checkout Board */
            .CheckoutSubBar {
                                width: clamp( 250px, 100%, 1000px );
                                min-width: 250px; max-width: 1000px;
                            }
            /* Checkout Title Bar */
            #CheckoutTitleBar   {}
            /* Checkout Cart Bar */
            #CheckoutCartBar    {
                                    
                                    background-color: transparent;
                                    margin-bottom: 66px;
                                }
                /* Checkout Cart Details Bar */
                #CheckoutCartDetailsBar {
                                            font-size: 18px;
                                            background-color: var(--white-color);
                                            margin-left: 16px; margin-right: 16px;
                                            padding: 16px 26px 16px 26px;
                                            display: flex;
                                            flex-direction: row;
                                            flex-wrap: wrap;
                                            align-items: center;
                                            justify-content: space-evenly;
                                            gap: 16px;
                                            border: solid 0 transparent;
                                            border-radius: 8px;
                                            box-shadow: 0px 0px 4px var(--border-color);
                                        }   
                    #CheckoutCartDetailsTitleBar    {
                                                        font-weight: bold;
                                                        width: 100%;
                                                        color: var(--text-gray-color);
                                                        margin-bottom: 16px;
                                                    }
                    #CheckoutCartDetailsItemsText   {}
                    #CheckoutCartDetailsTotalText   {}
                    #CheckoutCartDetailsButton  {
                                                    font-size: 18px; 
                                                    font-weight: bold;
                                                    color: var(--brown-color);
                                                    background-color: transparent;
                                                    padding: 8px 16px 8px 16px;
                                                    border: solid 2px var(--nude-color);
                                                    border-radius: 8px;
                                                }
                    #CheckoutCartDetailsButton:hover    {
                                                            color: white;
                                                            background-color: var(--nude-color);
                                                        }
            /* Checkout Address Bar */
            #CheckoutAddressBar {
                                    margin-bottom: 16px;
                                }
                #CheckoutSubTitleTextBar    {
                                                font-size: 20px;
                                                font-weight: bold;
                                                color: var(--nude-color);
                                                margin-left:26px; margin-bottom: 16px;
                                            }
                .CheckoutAddressSubBar  {
                                            margin-left: 46px; margin-bottom: 26px; margin-right: 26px;
                                        }
                    .CheckoutAddressTitleBar    {
                                                    margin-bottom: 16px;
                                                    display: flex;
                                                    flex-direction: row;
                                                    flex-wrap: wrap;
                                                }
                        .CheckoutAddressTitleMainText   {
                                                            font-size: 18px;
                                                            font-weight: bold;
                                                        }
                        .CheckoutAddressTitleInputBar   {
                                                            display: flex;
                                                            flex-direction: row;
                                                            gap: 8px;
                                                            margin-left: 150px;
                                                        }
                    .CheckoutAddressDetailsBar  {
                                                    margin-left: 16px;
                                                }
            /* Checkout Shipping Bar */
            #CheckoutShippingBar    {
                                        margin-bottom: 16px;
                                    }
                #CheckoutShippingTitleTextBar   {
                                                    font-size: 20px;
                                                    font-weight: bold;
                                                    color: var(--nude-color);
                                                    margin-left:26px; margin-bottom: 16px;
                                                }
                .CheckoutShippingSubBar {
                                            margin-left: 46px; margin-bottom: 26px; margin-right: 26px;
                                        }
                    #CheckoutShippingTitleBar   {
                                                    font-size: 18px;
                                                    font-weight: bold;
                                                    margin-bottom: 16px;
                                                }
                    #CheckountShippingDetailsBar    {
                                                        margin-left: 16px; margin-right: 16px;
                                                    }
            /* Checkout Billing Bar */
            #CheckoutBillingBar {
                                    margin-bottom: 42px;
                                }
                /* Checkout Billing Title Bar */
                #CheckoutBillingTitleBar    {
                                                font-size: 20px;
                                                font-weight: bold;
                                                color: var(--nude-color);
                                                margin-left:26px; margin-bottom: 16px;
                                            }
                /* Checkout Billing Details Bar */
                #CheckoutBillinDetailsgBar  {
                                                font-size: 18px;
                                                font-weight: bold;
                                                margin-left: 46px; margin-bottom: 26px; margin-right: 26px;
                                            }
                /* Checkout Billing Input Bar */
                #CheckoutBillingInputBar    {
                                                margin-left: 66px;
                                                display: flex;
                                                flex-direction: row;
                                                gap: 8px;
                                            }
                    #CheckoutBillingInputBar input  {
                                                        height: 20px; width: 20px;
                                                    }
            /* Checout Amount */
            #CheckoutAmountBar  {
                                    margin-bottom: 36px;
                                }
                #CheckoutAmountTitleBar {
                                            font-size: 20px;
                                            font-weight: bold;
                                            color: var(--orange-color);
                                            margin-left:26px; margin-bottom: 16px;
                                        }
                #CheckoutAmountDetailsBar   {
                                                font-size: 18px;
                                                font-weight: bold;
                                                margin-left: 46px; margin-bottom: 26px; margin-right: 26px;
                                            } 
                #CheckoutAmountTotalBar {
                                            margin-left: 66px; margin-bottom: 26px; margin-right: 26px;
                                        }  
            /* Checkout Payment Bar */
            #CheckoutPaymentBar {
                                    margin-bottom:36px; 
                                }
                #CheckoutPaymentTitleBar    {
                                                font-size: 20px;
                                                font-weight: bold;
                                                color: var(--orange-color);
                                                margin-left:26px; margin-bottom: 36px;
                                            }
                #CheckoutPaymentOptionsBar  {
                                                margin-left: 16px; margin-right: 16px;
                                                display: flex;
                                                flex-direction: row;
                                                flex-wrap: wrap;
                                                justify-content: center;
                                                gap: 26px;
                                            }
                    .CheckoutPaymentOptionsImg  {
                                                    height: 150px;
                                                    width: clamp( 250px, 100%, 350px );
                                                    min-width: 250px; max-width: 350px;
                                                    border: solid 0 transparent;
                                                    border-radius: 8px;
                                                    object-fit: cover;
                                                    object-position: center;
                                                }
            /* Checkout Terms Bar */
            #CheckoutTermsBar   {
                                }
                #CheckoutTermsTitleBar  {
                                            font-size: 20px;
                                            font-weight: bold;
                                            color: var(--brown-color);
                                            margin-left:8px; margin-bottom: 26px;
                                        }
                #CheckoutTermsBar   {
                                        margin-left: 66px; margin-bottom: 26px; margin-right: 26px;
                                    }
                    #CheckoutTermsBar a {
                                            font-weight: bold;
                                            color: var(--text-gray-color);
                                        }
                    #CheckoutTermsBar a:hover { color:var(--orange-color); }

    /* Product View Board */
    #ProductViewBoard   {}
        /* Product Title Bar
        #ProductTitleBar    {
                                width: 100%;
                                font-size: 36px;
                                font-weight: bold;
                                color: var(--nude-color);
                                padding-left: 46px;
                                margin-bottom: 26px;
                            }
        */
        /* Product Body Bar */
        #ProductBodyBar {
                            width: 100%;
                            background-color: transparent;
                            padding: 0 16px 0 16px;
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            align-items: center;
                            justify-content: center;
                            gap: 16px;
                        }
            /* Product Body Img Bar */
            #ProductBodyImgBar  {
                                    height: 90vh;
                                    width: initial;
                                    width: 56vw;
                                    min-width: none; max-width: 700px;
                                    background-color: transparent;
                                    position: relative;
                                    overflow: hidden;
                                }
                /* Product Body Img */
                .ProductBodyImg {
                                    height: 100%;
                                    width: 100%;
                                    align-self: flex-start;
                                    object-fit: cover;
                                    object-position: center;
                                    border: solid 0 transparent;
                                    border-radius: 8px;

                                    position: absolute;
                                }
                /* Product Body Slide Img */
                .ProductBodySlideImg    {
                                            height: 36px; width: 36px;
                                            border: solid 0 transparent;
                                            border-radius: 8px;
                                            z-index: 2;
                                            position: absolute;
                                            top: 50%;
                                            opacity: 0.7;
                                        }
                .ProductBodySlideImg:hover  {
                                                opacity: 1;
                                            }
                .ProductBodySlideImg.LeftImg   {
                                                    left: 8px;
                                                }
                .ProductBodySlideImg.RightImg   {
                                                    right: 8px;
                                                }    
                .ProductBodySlideImg.SizeImg    {
                                                    top: 8px; right: 8px;
                                                }
                .ProductBodySlideImg.NoteImg    {
                                                    top: initial; left: 8px; bottom: 8px;
                                                }
                /* Product Body Bar */
                .ProductBodyBar {
                                    width: 100%;
                                    background-color: rgba( 180,180,180, 0.7 );
                                    padding: 16px 8px 16px 8px;
                                    border: solid 0 transparent;
                                    display: flex;
                                    flex-direction: row;
                                    flex-wrap: wrap;
                                    align-items: center;
                                    gap: 8px;
                                    position: absolute;
                                    z-index: 2;
                                }
                    .ProductBodyBar.AddSizeBar  {
                                                    border-top-left-radius: 8px; border-top-right-radius: 8px;
                                                    top: 0;
                                                }
                        .ProductBodyBar.AddSizeBar p    {
                                                            font-weight: bold;
                                                            color: var(--white-color);
                                                        }
                        .ProductBodyBar.AddSizeBar img  {
                                                            height: 36px; width: 36px;
                                                            border: solid 0 transparent;
                                                            border-radius: 8px;
                                                            opacity: 0.7;
                                                        }
                        .ProductBodyBar.AddSizeBar img:last-child   {
                                                                        height: 26px; width: 26px;
                                                                        margin-left: auto; margin-right: 8px;
                                                                    }
                        .ProductBodyBar.AddSizeBar img:hover    {
                                                                    opacity: 1;
                                                                }
                    .ProductBodyBar.AddNoteBar  {
                                                    bottom: 0;
                                                }
            /* Product Body Details Bar */
            #ProductBodyDetailsBar  {
                                        width: 36vw;
                                        background-color: transparent;
                                        padding: 0px 16px 0px 16px;
                                        align-self: flex-start;
                                    }
                /* Product Body Details Main Bar */
                #ProductBodyDetailsMainBar  {
                                                width:100%;
                                                background-color: white;
                                                margin-bottom: 26px;
                                                border: solid 0 transparent;
                                                border-radius: 8px;
                                                box-shadow: 0px 2px 8px var(--border-color);
                                            }
                    .ProductBodyDetailsMainSubBar   {
                                                        padding: 26px 26px 26px 26px;
                                                    }
                    /* Product Body Details Main Data Bar */
                    #ProductBodyDetailsMainDataBar  {
                                                        border-bottom: solid 2px var(--Beige-color);
                                                    }
                        #ProductBodyDetailsMainDataTitleText    {
                                                                    font-size: 36px;
                                                                    color: var(--brown-color);
                                                                    margin-bottom: 16px;
                                                                }
                        #ProductBodyDetailsMainDataPriceText    {
                                                                    font-size: 26px;
                                                                    font-weight: bold;
                                                                    color: var(--orange-color);
                                                                    margin-left: 26px; margin-bottom: 26px;
                                                                }
                        #ProductBodyDetailsMainDataPackagedText {
                                                                    font-size: 18px;
                                                                    color: var(--brown-color);
                                                                    margin-bottom: 16px;
                                                                }
                        #ProductBodyDetailsMainDataSoldOutText  {
                                                                    width: 150px;
                                                                    text-align: center;
                                                                    color: var(--text-gray-color);
                                                                    padding: 8px 16px 8px 16px;
                                                                    border: solid 2px var(--border-color);
                                                                    border-radius: 8px;
                                                                }
                        #ProductBodyDetailsMainDataStockText    {
                                                                    text-align: center;
                                                                    font-weight: bold;
                                                                    color: var(--brown-color);
                                                                    padding: 8px 16px 8px 16px;
                                                                    border: solid 2px var(--Beige-color);
                                                                    border-radius: 8px;
                                                                }
                    /* Product Body Details Main Cart Bar */
                    #ProductBodyDetailsMainCartBar  {
                                                        border-bottom: solid 2px var(--Beige-color);
                                                    }
                        /* Product Body Details Main Cart Title Bar */
                        #ProductBodyDetailsMainCartTitleBar  {
                                                                font-size: 18px;
                                                                color: var(--text-gray-color);
                                                                margin-bottom: 26px;
                                                            }
                        /* Product Body Details Main Cart Sub Bar */
                        #ProductBodyDetailsMainCartSubBar    {
                                                                margin-bottom: 16px;
                                                                display: flex;
                                                                flex-direction: row;
                                                                flex-wrap: wrap;
                                                                align-items: center;
                                                                justify-content: center;
                                                                gap: 16px;
                                                            }
                            /* Product Body Details Main Cart Incremeneting Bar */
                            #ProductBodyDetailsMainCartIncremenetingBar  {
                                                                            display: flex;
                                                                            flex-direction: row;
                                                                        }
                                .ProductBodyDetailsMainCartIncremenetingImg {
                                                                                height: 36px; width: 36px;
                                                                                border: solid 0 transparent;
                                                                                opacity: 0.5;
                                                                                border-radius: 8px;
                                                                            }
                                .ProductBodyDetailsMainCartIncremenetingImg:hover   {
                                                                                        opacity: 1;
                                                                                    }
                                #ProductBodyDetailsMainCartIncremenetingQuantityBar {
                                                                                        font-size: 18px;
                                                                                        font-weight: bold;
                                                                                        color: var(--text-gray-color);
                                                                                        padding: 8px 10px 0px 10px;
                                                                                        margin-right: 6px; margin-left: 6px;
                                                                                        border-top: solid 1px;
                                                                                        border-bottom: solid 1px;
                                                                                        border-color: var(--Beige-color);
                                                                                    }
                            /* Product Body Details Main Cart Amount Bar */
                            #ProductBodyDetailsMainCartAmountBar    {
                                                                        font-size: 26px;
                                                                        font-weight: bold;
                                                                        color: var(--nude-color);
                                                                        padding: 8px 8px 8px 8px;
                                                                    }
                        /* Product Body Details Main Cart Button Bar */
                        #ProductBodyDetailsMainCartButtonBar    {
                                                                    display: flex;
                                                                }
                            #ProductBodyDetailsMainCartButton   {
                                                                    width: clamp( 180px, 80%, 250px );
                                                                    min-width: 180px; max-width: 250px;
                                                                    font-size: 18px;
                                                                    font-weight: bold;
                                                                    color: var(--white-color);
                                                                    background-color: var(--nude-color);
                                                                    padding: 16px 16px 16px 16px;
                                                                    margin-right: auto; margin-left: auto;
                                                                    border: solid 0 transparent;
                                                                    border-radius: 8px;
                                                                }
                            #ProductBodyDetailsMainCartButton:hover {
                                                                        color: var(--white-color);
                                                                        background-color: var(--orange-color);
                                                                    }
                    /* Product Body Details Main Options Bar */
                    #ProductBodyDetailsMainOptionsBar   {
                                                            background-color: white;
                                                            display: flex;
                                                            flex-direction: row;
                                                            justify-content: space-evenly;
                                                            border: solid 0 transparent;
                                                            border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;
                                                        }
                        #ProductBodyDetailsMainOptionsBar img   {
                                                                    height: 36px; width: 36px;
                                                                    border: solid 0 transparent;
                                                                    border-radius: 8px;
                                                                }
                /* Product Body Details Buttons Bar Element */
                #ProductBodyDetailsButtonBar    {
                                                }
                    #ProductBodyDetailsRemoveButton {
                                                        width: 100%;
                                                        font-size: 18px;
                                                        font-weight: bold;
                                                        color: var(--text-gray-color);
                                                        background-color: var(--background-gray-color);
                                                        padding: 16px 16px 16px 16px;
                                                        border: solid 0 transparent;
                                                        border-radius: 8px;
                                                    }
                    #ProductBodyDetailsRemoveButton:hover   {
                                                                color: var(--white-color);
                                                                background-color: var(--orange-color);
                                                            }


    /* Products Loading Error Bar */
            /* Products Loading Error Bar */
            #ProductLoadingErrorBar {
                                        padding: 26px 0 36px 0;
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                    }
                #ProductLoadingErrorBar img {
                                                width: clamp( 250px, 80%, 300px );
                                                margin-bottom: 16px;
                                            }
                #ProductLoadingErrorBar p   {
                                                text-align: center;
                                                font-size: 22px;
                                                font-weight: bold;
                                                color: var(--text-gray-color);
                                                margin-left: 26px; margin-right: 26px;
                                            }
                #ProductLoadingErrorOptionsBar  {
                                                    text-align: center;
                                                    margin-top: 26px;
                                                }
                    #ProductLoadingErrorOptionsButton   {
                                                            font-size: 18px;
                                                            font-weight: bold;
                                                            color: var(--white-color);
                                                            background-color: var(--orange-color);
                                                            padding: 16px 16px 16px 16px;
                                                            border: solid 0 transparent;
                                                            border-radius: 8px;
                                                        }
                    #ProductLoadingErrorOptionsButton:hover {
                                                                background-color: var(--brown-color);
                                                            }
        /* Popular Options Bar */
        .ProductOptionsBar  {
                                text-align: center;
                            }   
            .ProductOptionsBar button   {
                                            text-align: center;
                                            font-size: 18px;
                                            font-weight: bold;
                                            color: var(--white-color);
                                            background-color: var(--orange-color);
                                            padding: 16px 16px 16px 16px;
                                            border: solid 0 transparent;
                                            border-radius: 8px;
                                        }
            .ProductOptionsBar button:hover {
                                                color: var(--white-color);
                                                background-color: var(--brown-color);                                        
                                            }

    /* Reviews Board */
    /* News Board */
    #NewsBoard  {
                    padding: 46px 16px 46px 16px;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: center;
                    row-gap: 26px;
                }
        /* News Bars */
        .NewsBar    {
                        height: 350px;
                        width: clamp( 270px, 48%, 450px );
                        padding: 16px 16px 16px 16px;
                    }
        /* News Letter Bar */
        #NewsLetterBar      {
                                background-color: transparent;
                                border-right: solid 1px var(--border-color);
                                border-bottom: none;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;
                                gap: 16px;
                            }
            /* News Letter First Title Text */
            #NewsLetterFirstTitleText   {
                                            font-size: 16px;
                                            color: var(--text-gray-color);
                                        }
            /* News Letter Second Title Text */
            #NewsLetterSecondTitleText  {
                                            font-size: 26px;
                                            font-weight: bold;
                                            color: var(--nude-color);
                                        }
            /* News Letter Description Text */
            #NewsLetterDescriptionText  {
                                            font-size: 16px;
                                            color: var(--text-gray-color);
                                            margin-top: 16px;
                                        }
            /* News Letter Input Bar */
            #NewsLetterInputBar {
                                    margin-top: 16px;
                                    display: flex;
                                    flex-direction: row;
                                    flex-wrap: wrap;
                                    gap: 16px;
                                    align-items: center;
                                    justify-content: center;
                                }
                /* News Letter Email Input */
                #NewsLetterEmailInput   {
                                            text-align: center;
                                            font-size: 18px;
                                            font-weight: bold;
                                            color: var(--orange-color);
                                            padding: 16px 8px 16px 8px;
                                            border: solid 2px var(--Beige-color);
                                            border-radius: 8px;
                                        }
                /* News Letter Submit Button */
                #NewsLetterSubmitButton {
                                            font-size: 18px;
                                            font-weight: bold;
                                            color: var(--brown-color);
                                            background-color: var(--Beige-color);
                                            padding: 16px 16px 16px 16px;
                                            border: solid 0 transparent;
                                            border-radius: 8px;
                                        }
                #NewsLetterSubmitButton:hover   {
                                                    color: var(--white-color);
                                                    background-color: var(--orange-color);
                                                }
        /* News Follow Bar */
        #NewsFollowBar      {
                                background-color: transparent;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                gap: 16px;
                            }
            /* News Letter Title Text */
            #NewsFollowTitleText    {
                                        font-size: 26px;
                                        font-weight: bold;
                                        color: var(--nude-color);
                                    }
            /* News Letter Description Text */
            #NewsFollowDescriptionText  {
                                            color: var(--text-gray-color);
                                        }
            /* News Letter Media Bar */
            #NewsFollowMediaBar {
                                    display: flex;
                                    flex-direction: row;
                                    flex-wrap: wrap;
                                    gap: 16px;
                                }
                .NewsFollowMediaImg {
                                        height: 36px; width: 36px;
                                        border: solid 0 transparent;
                                        border-radius: 8px;
                                    }
            /* News Letter Contact Title Text */
            #NewsFollowContactTitleText {
                                            color: var(--text-gray-color);
                                            margin-top: 26px;
                                        }
            /* News Letter Contact Button */
            #NewsFollowContactButton    {
                                            font-size: 18px;
                                            font-weight: bold;
                                            color: var(--brown-color);
                                            background-color: var(--Beige-color);
                                            padding: 16px 16px 16px 16px;
                                            border: solid 0 transparent;
                                            border-radius: 8px;
                                        }
            #NewsFollowContactButton:hover  {
                                                color: var(--white-color);
                                                background-color: var(--brown-color);
                                            }
            #NewsFollowWhatsappButton   {
                                            font-size: 18px;
                                            font-weight: bold;
                                            color: var(--white-color);
                                            background-color: RGB( 0, 128, 0 );
                                            padding: 8px 8px 8px 16px;
                                            display: flex;
                                            flex-direction: right;
                                            align-items: center;
                                            border: solid 0 transparent;
                                            border-radius: 8px;
                                        }
                #NewsFollowWhatsappButton p { margin-right: 16px; }
                #NewsFollowWhatsappButton img   {
                                                    height: 36px;
                                                    width: 36px;
                                                }
            #NewsFollowWhatsappButton:hover {
                                                background-color: var(--brown-color);                
                                            }
        /* News Menu Bar */
        #NewsMenuBar    {
                            width: clamp( 250px, 100%, 930px );
                            background-color: transparent;
                            padding: 16px 0 16px 0;
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            align-items: center;
                            justify-content: center;
                            gap: 26px;
                        }
            .NewsMenuItem   {
                                color: var(--text-gray-color);
                            }
            .NewsMenuItem:hover {
                                    font-weight: bold;
                                    color: var(--brown-color);
                                }

    /* Blogs Board */

/* account access html styling */
    /* Access Board */
    #AccessBoard    {
                        background-color: var(--Beige-color);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        gap: 16px;
                    }
        /* Access Body Bar */
        #AccessBodyBar  {
                            height: 550px;
                            width: 100%;
                            background-color: transparent;
                            border-bottom: solid 1px var(--border-color);
                            display: block;
                            flex-direction: initial;
                            justify-content: initial;
                        }
            .AccessFormBar  {
                                height: 100%; width: 49.8%;
                                min-width: none; max-width: none;
                                background-color: transparent;
                                padding: 26px 0 26px 0;
                                display: none;
                            }
            .AccessFormBar.active   {
                                        display: block;
                                    }
                .AccessFormSubBar   {
                                        height: 100%;
                                        width: clamp( 250px, 100%, 500px );
                                        min-width: 250px; max-width: 500px;
                                        background-color: transparent;
                                        padding-right: 16px; padding-left: 16px;
                                        margin-right: auto; margin-left: auto;
                                    }
                    .AccessFormTitleBar {
                                            font-size: 26px;
                                            font-weight: bold;
                                            color: var(--brown-color);
                                            margin-bottom: 36px;
                                        }
                    .AccessFormDetailsBar   {
                                                padding-right: 16px; padding-left: 16px;
                                                margin-bottom: 26px;
                                            }
                        .AccessFormDetailsTitleBar  {
                                                        font-size: 18px;
                                                        font-weight: bold;
                                                        color: var(--brown-color);
                                                        margin-left: 8px; margin-bottom: 8px;
                                                    }
                        .AccessFormDetailsInputBar  {
                                                    }
                            .AccessFormDetailsInputBar input    {
                                                                    width: 100%;
                                                                    text-align: center;
                                                                    font-size: 16px;
                                                                    font-weight: bold;
                                                                    color: var(--orange-color);
                                                                    background-color: var(--white-color);
                                                                    padding: 16px 26px 16px 26px;
                                                                    border: solid 0 transparent;
                                                                    border-radius: 8px;
                                                                }
                        .AccessFormOptionsBar   {
                                                    background-color: transparent;
                                                    padding-right: 16px; padding-left: 16px;
                                                    margin-bottom: 26px;
                                                    display: flex;
                                                    flex-direction: row;
                                                    flex-wrap: wrap;
                                                    justify-content: space-between;
                                                    row-gap: 8px;
                                                }
                            .AccessFormOptionsRememberBar   {
                                                                display: flex; 
                                                                flex-direction: row;
                                                            }
                                .AccessFormOptionsRememberBar input {
                                                                        margin-right: 8px;
                                                                    }
                            .AccessFormOptionsForgotBar a > p:hover {
                                                                        color: var(--orange-color);
                                                                    }
                        .AccessFormSubmitBar    {
                                                    text-align: center;
                                                }
                        .AccessFormSubmitBar button {
                                                        width: 200px;
                                                        font-size: 18px;
                                                        font-weight: bold;
                                                        color: var(--brown-color);
                                                        background-color: transparent;
                                                        padding: 10px 0 10px 0;
                                                        border: solid 2px var(--nude-color);
                                                        border-radius: 8px;
                                                    }
                        .AccessFormSubmitBar button:hover   {
                                                                color: var(--white-color);
                                                                background-color: var(--orange-color);
                                                                border-color: var(--orange-color);
                                                            }

            /* Access Login Form Bar */
            #AccessLoginFormBar {
                                    background-color: transparent;
                                    float: left;
                                    clear: none;
                                }
            /* Access Signup Form Bar */
            #AccessSignupFormBar    {
                                        background-color: transparent;
                                        float: left;
                                        clear: none;
                                    }
            /* Access Side Panel Bar */
            #AccessSidePanelBar {
                                    height: 100%;
                                    width: 49.8%;
                                    background-color: transparent;
                                    float: right;
                                    clear:none;
                                    position: relative;
                                    overflow: hidden;
                                }
                /* Access Side Panel Sub Bar */
                .AccessSidePanelSubBar  {
                                            height: 100%; width: 100%;
                                            padding: 0 26px 26px 26px;
                                            position: absolute; 
                                            display: flex;
                                            top: 0;
                                            left: 0;
                                            opacity: 0;
                                            transform: translateX(100%);
                                            transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
                                        }
                .AccessSidePanelSubBar.active   {   opacity: 1;
                                                    transform: translateX(0);
                                                }
                .AccessSidePanelSubBar.slide-left   {
                                                        transform: translateX(-100%);
                                                        opacity: 0; 
                                                    }
                #AccessLoginSidePanelBar    {
                                                background: url( "../assets/poster_images/access_poster_login_img.png" );
                                                background-position: right center;
                                                background-position: right;
                                                background-size: cover;
                                                background-repeat: no-repeat;
                                            }
                #AccessSignupSidePanelBar   {
                                                background: url( "../assets/poster_images/access_poster_signup_img.png" );
                                                background-position: right center;
                                                background-position: right;
                                                background-size: cover;
                                                background-repeat: no-repeat;
                                            }
                    .AccessSidePanelDetailsBar  {
                                                    margin-top: auto;
                                                    margin-bottom: 0;
                                                }
                        .AccessSidePanelTitleText   {
                                                        margin-bottom: 16px;
                                                    }     
                        #AccessLoginSidePanelDetailsBar  .AccessSidePanelTitleText { color: var(--orange-color); }
                        #AccessSignupSidePanelDetailsBar .AccessSidePanelTitleText { color: var(--Beige-color); }           
                        .AccessSidePanelDescriptionText {
                                                            margin-bottom: 26px;
                                                        }
                        #AccessSignupSidePanelDetailsBar .AccessSidePanelDescriptionText    {
                                                                                                color: var(--white-color);
                                                                                            }
                        .AccessSidePanelButton  {
                                                    font-size: 18px;
                                                    font-weight: bold;
                                                    padding: 16px 16px 16px 16px;
                                                    margin-left: 26px;
                                                    border: solid 0 transparent;
                                                    border-radius: 8px;
                                                }
                        .AccessSidePanelButton:hover, #AccessLoginSidePanelButton:hover, #AccessSignupSidePanelButton:hover
                                                        {
                                                            color: var(--white-color);
                                                            background-color: var(--brown-color);
                                                        }
                        #AccessLoginSidePanelButton {
                                                        color: white;
                                                        background-color: var(--orange-color);
                                                    }
                        #AccessSignupSidePanelButton    {
                                                            color: var(--brown-color);
                                                            background-color: var(--Beige-color);
                                                        }

        .slide-right
        {
            transform: translateX(100%) !important;
            transition: transform 0.3s ease;
        }

        /* Access Description Bar
        #AccessDescriptionBar   {
                                    width: clamp( 250px, 100%, 1000px );
                                    min-width: 250px; max-width: 1000px;
                                    font-size: 18px;
                                    color: var(--text-gray-color);
                                    padding: 36px 16px 36px 16px;
                                }
        */

/* Account Forgot Password styling */
    /* Forgot Board */
    #ForgotBoard    {
                        height: 550px;
                        width: 100%;
                        background-color: var(--Beige-color);
                        border-bottom: solid 1px var(--border-color);
                        display: block;
                        flex-direction: initial;
                        justify-content: initial;
                    }
        /* Forgot Body Bar */
        #ForgotBodyBar  {
                            height: 550px; width: 49.8%;
                            min-width: none; max-width: none;
                            background-color: transparent;
                            min-width: none; max-width: none;
                            padding: 26px 16px 26px 16px;
                            float: left;
                            clear: none;
                        }
            #ForgotBodySubBar   {
                                    height: 550px;
                                    width: clamp( 250px, 100%, 500px );
                                    min-width: 250px; max-width: 500px;
                                    margin-right: auto; margin-left: auto;
                                }
            /* Forgot Body Title Bar */
            #ForgotBodyTitleBar {
                                    font-size: 26px;
                                    font-weight: bold;
                                    color: var(--brown-color);
                                    margin-bottom: 36px;
                                }
            /* Forgot Body Details Bar */
            #ForgotBodyDetailsBar   {
                                        padding-right: 16px; padding-left: 16px;
                                        margin-bottom: 26px;
                                    }
                /* Forgot Body Details Title Bar */
                #ForgotBodyDetailsTitleBar  {
                                                font-size: 18px;
                                                font-weight: bold;
                                                color: var(--brown-color);
                                                margin-left: 8px; margin-bottom: 8px;
                                            }
                /* Forgot Body Details Input Bar */
                #ForgotBodyDetailsInputBar  {
                                                margin-bottom: 26px;
                                            }
                    #ForgotBodyDetailsInputBar input    {
                                                            width: 100%;
                                                            text-align: center;
                                                            font-size: 16px;
                                                            font-weight: bold;
                                                            color: var(--orange-color);
                                                            background-color: var(--white-color);
                                                            padding: 16px 26px 16px 26px;
                                                            border: solid 0 transparent;
                                                            border-radius: 8px;
                                                        }
            /* Forgot Body Submit Bar */
            #ForgotBodySubmitBar    {
                                        text-align: center;
                                    }
                #ForgotBodySubmitBar button {
                                                        font-size: 18px;
                                                        font-weight: bold;
                                                        color: var(--brown-color);
                                                        background-color: transparent;
                                                        padding: 10px 26px 10px 26px;
                                                        border: solid 2px var(--nude-color);
                                                        border-radius: 8px;
                }
                #ForgotBodySubmitBar button:hover   {
                                                                color: var(--white-color);
                                                                background-color: var(--orange-color);
                                                                border-color: var(--orange-color);
                                                    }
        /* Forgot Side Panel Bar */
        #ForgotSidePanelBar {
                                height: 550px;
                                width: 49.8%;
                                min-width: none; max-width: none;
                                float: right;
                                clear:none;
                                display: flex;
                                background: url( "../assets/poster_images/access_poster_forgot_img.png" );
                                background-position: right center;
                                background-position: right;
                                background-size: cover;
                                background-repeat: no-repeat;
                            }
            #ForgotSidePanelSubBar {
                                        padding: 0 26px 36px 26px;
                                        margin-top: auto;
                                        margin-bottom: 0;
                                    }
                #ForgotSidePanelSubBar h1   {
                                                color: var(--brown-color);
                                                margin-bottom: 16px;
                                            }
                #ForgotSidePanelSubBar p    {
                                                margin-bottom: 26px;
                                            }
                #ForgotSidePanelButton {
                                                    font-size: 18px;
                                                    font-weight: bold;
                                                    color: var(--white-color);
                                                    background-color: var(--orange-color);
                                                    padding: 16px 16px 16px 16px;
                                                    margin-left: 26px;
                                                    border: solid 0 transparent;
                                                    border-radius: 8px;
                }
                #ForgotSidePanelButton:hover    {
                                                    color: var(--white-color);
                                                    background-color: var(--brown-color);
                                                }

/* Reset Password styling */
    /* Reset Password Board */
    #ResetPasswordBoard {
                            height: 550px;
                            width: 100%;
                            background-color: var(--Beige-color);
                            border-bottom: solid 1px var(--border-color);
                            display: block;
                            flex-direction: initial;
                            justify-content: initial;
                        }
        /* Resset Password Body Bar */
        #ResetPasswordBodyBar   {
                                    height: 550px; width: 49.8%;
                                    min-width: none; max-width: none;
                                    background-color: transparent;
                                    min-width: none; max-width: none;
                                    padding: 26px 16px 26px 16px;
                                    float: left;
                                    clear: none;
                                }
            /* Reset Password Body Sub Bar */
            #ResetPasswordBodySubBar    {
                                        }
                .ResetPasswordBodySubDetailsBar {
                                                    padding-right: 16px; padding-left: 16px;
                                                    margin-bottom: 26px;
                                                }
                    .ResetPasswordBodySubTitleBar   {
                                                        font-size: 18px;
                                                        font-weight: bold;
                                                        color: var(--brown-color);
                                                        margin-left: 8px; margin-bottom: 8px;
                                                    }
                    .ResetPasswordBodySubInputBar   {
                                                        margin-bottom: 26px;
                                                    }
                        .ResetPasswordBodySubInput  {
                                                        width: 100%;
                                                        text-align: center;
                                                        font-size: 16px;
                                                        font-weight: bold;
                                                        color: var(--orange-color);
                                                        background-color: var(--white-color);
                                                        padding: 16px 26px 16px 26px;
                                                        border: solid 0 transparent;
                                                        border-radius: 8px;
                                                    }
                /* Reset Password Body Tite Bar */
                #ResetPasswordBodyTiteBar   {
                                                font-size: 26px;
                                                font-weight: bold;
                                                color: var(--brown-color);
                                                margin-bottom: 36px;
                                            }
                /* Reset Password Body Password Bar */
                #ResetPasswordBodyPasswordBar   {
                                                }
                /* Reset Password Body Confirm Bar */
                #ResetPasswordBodyConfirmBar    {
                                                }
                    #AccountDetailsBodyItemButtonBar    {
                                                            text-align: center;
                                                        }
                        #AccountDetailsBodyItemButton   {
                                                            font-size: 18px;
                                                            font-weight: bold;
                                                            color: var(--brown-color);
                                                            background-color: transparent;
                                                            padding: 16px 16px 16px 16px;
                                                            border: solid 2px var(--nude-color);
                                                            border-radius: 8px;
                                                        }
                        #AccountDetailsBodyItemButton:hover {
                                                                color: var(--white-color);
                                                                background-color: var(--nude-color);
                                                            }
                /* Reset Password Body Submit Bar */
                #ResetPasswordBodySubmitBar { text-align: center; }
                    #ResetPasswordBodySubmitButton  {
                                                        font-size: 18px;
                                                        font-weight: bold;
                                                        color: var(--brown-color);
                                                        background-color: transparent;
                                                        padding: 10px 26px 10px 26px;
                                                        border: solid 2px var(--nude-color);
                                                        border-radius: 8px;
                                                    }
                    #ResetPasswordBodySubmitButton:hover    {
                                                                color: var(--white-color);
                                                                background-color: var(--orange-color);
                                                                border-color: var(--orange-color);
                                                            }
        /* Resset Password Side Panel Bar */
        #ResetPasswordSidePanelBar  {
                                        height: 550px;
                                        width: 49.8%;
                                        min-width: none; max-width: none;
                                        float: right;
                                        clear:none;
                                        display: flex;
                                        background: url( "../assets/poster_images/access_poster_reset_img.png" );
                                        background-position: right center;
                                        background-position: right;
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                    }
            /* Resset Password Side Panel Sub Bar */
            #ResetPasswordSidePanelSubBar   {
                                                padding: 0 26px 36px 26px;
                                                margin-top: auto;
                                                margin-bottom: 0;
                                            }
                #ResetPasswordSidePanelSubBar h1    {
                                                        color: var(--brown-color);
                                                        margin-bottom: 16px;
                                                    }
                #ResetPasswordSidePanelSubBar p {
                                                    margin-bottom: 26px;
                                                }
                #ResetPasswordPanelButton   {
                                                font-size: 18px;
                                                font-weight: bold;
                                                color: var(--white-color);
                                                background-color: var(--orange-color);
                                                padding: 16px 16px 16px 16px;
                                                margin-left: 26px;
                                                border: solid 0 transparent;
                                                border-radius: 8px;
                                            }
                #ResetPasswordPanelButton:hover {
                                                    color: var(--white-color);
                                                    background-color: var(--brown-color);
                                                }
/* Send Message Styling */
    /* Send Message Board */
    #SendMessageBoard  {
                            height: 600px;
                            width: 100%;
                            background-color: var(--Beige-color);
                            border-bottom: solid 1px var(--border-color);
                            display: block;
                            flex-direction: initial;
                            justify-content: initial;
                        }
        /* Send Message Side Panel Bar */
        #SendMessageSidePanelBar    {
                                        height: 600px;
                                        width: 49.8%;
                                        min-width: none; max-width: none;
                                        float: left;
                                        clear:none;
                                        display: flex;
                                        background: url( "../assets/poster_images/contact_us_poster_img.png" );
                                        background-position: right center;
                                        background-position: right;
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                    }
            #SendMessageSidePanelSubBar {
                                            padding: 0 26px 36px 26px;
                                            margin-top: auto;
                                            margin-bottom: 0;
                                        }
                #SendMessageSidePanelSubBar h1  {
                                                    color: var(--nude-color);
                                                    margin-bottom: 16px;
                                                }
                #SendMessageSidePanelSubBar p   { 
                                                    color: var(--white-color);
                                                    margin-bottom: 26px;
                                                }
                #SendMessageSidePanelSubBar a > button  {
                                                            font-size: 18px;
                                                            font-weight: bold;
                                                            color: var(--brown-color);
                                                            background-color: var(--Beige-color);
                                                            padding: 16px 16px 16px 16px;
                                                            margin-left: 26px;
                                                            border: solid 0 transparent;
                                                            border-radius: 8px;
                                                        }
                #SendMessageSidePanelSubBar a > button:hover    {
                                                                    color: var(--white-color);
                                                                    background-color: var(--brown-color);
                                                                }
        /* Send Message Body Bar */
        #SendMessageBodyBar {
                                height: 600px; width: 49.8%;
                                min-width: none; max-width: none;
                                background-color: transparent;
                                min-width: none; max-width: none;
                                padding: 26px 16px 26px 16px;
                                float: right;
                                clear: none;
                            }
            #SendMessageBodySubBar  {
                                        height: 550px;
                                        width: clamp( 250px, 100%, 500px );
                                        min-width: 250px; max-width: 500px;
                                        margin-right: auto; margin-left: auto;
                                    }
                #SendMessageBodyTitleBar    {
                                                font-size: 26px;
                                                font-weight: bold;
                                                color: var(--brown-color);
                                                margin-bottom: 36px;
                                            }
                #SendMessageBodyDetailsBar  {
                                                
                                            }
                    .SendMessageBodyDetailsSubBar   {
                                                        padding-right: 16px; padding-left: 16px;
                                                        margin-bottom: 26px;
                                                    }
                        .SendMessageBodyDetailsTitleBar {
                                                            font-size: 18px;
                                                            font-weight: bold;
                                                            color: var(--brown-color);
                                                            margin-left: 8px; margin-bottom: 8px;
                                                        }
                        .SendMessageBodyDetailsInputBar {
                                                            margin-bottom: 26px;
                                                        }
                            .SendMessageBodyDetailsInputBar input   {
                                                                        width: 100%;
                                                                        text-align: center;
                                                                        font-size: 16px;
                                                                        font-weight: bold;
                                                                        color: var(--orange-color);
                                                                        background-color: var(--white-color);
                                                                        padding: 16px 26px 16px 26px;
                                                                        border: solid 0 transparent;
                                                                        border-radius: 8px; 
                                                                    }
                            .SendMessageBodyDetailsInputBar textarea    {
                                                                            height: 150px; width: 100%;
                                                                            text-align: center;
                                                                            font-size: 16px;
                                                                            font-weight: bold;
                                                                            color: var(--orange-color);
                                                                            background-color: var(--white-color);
                                                                            padding: 16px 26px 16px 26px;
                                                                            border: solid 0 transparent;
                                                                            border-radius: 8px;
                                                                        }
                #SendMessageBodySubmitBar   {   text-align: center; }
                        #SendMessageBodySubmitBar button    {
                                                                font-size: 18px;
                                                                font-weight: bold;
                                                                color: var(--brown-color);
                                                                background-color: transparent;
                                                                padding: 10px 26px 10px 26px;
                                                                border: solid 2px var(--nude-color);
                                                                border-radius: 8px;
                                                            }
                        #SendMessageBodySubmitBar button:hover  {
                                                                    color: var(--white-color);
                                                                    background-color: var(--orange-color);
                                                                    border-color: var(--orange-color);
                                                                }

/* Account Details Styling */
    /* Account Details Bar */
    #AccountDetailsBar  {
                            background: var( --nude-color );
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                        }
        /* Account Details Menu Bar */
        #AccountDetailsMenuBar  {
                                    height: 85vh;
                                    width: 39.8%;
                                    background-image: url( "../assets/poster_images/account_details_poster_img.png" );
                                    background-position: right center;
                                    background-size: cover;
                                    background-repeat: no-repeat;
                                    display: flex;
                                    position: initial;
                                    top: initial; left: initial;
                                    z-index: initial;
                                    border: none;
                                }
            #AccountDetailsMenuSubBar   {
                                            width: 80%;
                                            background-color: transparent;
                                            margin-top: auto; margin-left: auto; margin-bottom: 26px; margin-right: 26px;
                                        }
                #AccountDetailsMenuSubTitleBar      {
                                                        text-align: center;
                                                        margin-bottom: 16px;
                                                    }
                #AccountDetailsMenuSubDetailsBar    {
                                                        color: var(--white-color);
                                                        margin-bottom: 26px; 
                                                    }
                #AccountDetailsMenuSubButtonBar     {
                                                        text-align: center;
                                                    }
                    #AccountDetailsMenuSubButton    {
                                                        width: 250px;
                                                        font-size: 18px; font-weight: bold;
                                                        color: var(--brown-color);
                                                        background-color: var(--Beige-color);
                                                        padding: 16px 16px 16px 16px;
                                                        border: solid 0 transparent;
                                                        border-radius: 8px;
                                                    }
                    #AccountDetailsMenuSubButton:hover  {
                                                            color: var(--white-color);
                                                            background-color: var(--brown-color);
                                                        }
        /* Account Details Body Bar */
        #AccountDetailsBodyBar  {
                                    height: 85vh;
                                    width: 60%;
                                    background-color: var(--Beige-color);
                                    padding: 26px 26px 36px 26px;
                                    overflow-y: auto;
                                    overflow-x: hidden;
                                    display: flex;
                                    flex-direction: column;
                                    gap: 26px;
                                    border: solid 0 transparent;
                                    border-bottom-left-radius: 26px;
                                }
        #AccountDetailsBodyBar::-webkit-scrollbar   {
                                                        width: 2px;
                                                        background-color: var(--nude-color);
                                                    }
        #AccountDetailsBodyBar::-webkit-scrollbar-thumb {
                                                            width: 2px;
                                                            background-color: var(--brown-color);
                                                        }
            /* Account Details Body Sub Bar */
            .AccountDetailsBodySubBar   {
                                            padding: 26px 26px 36px 26px;
                                            border-bottom: solid 1px var(--brown-color);
                                        }
            .AccountDetailsBodySubBar:last-child    {
                                                        border-bottom: 0;
                                                    }
                .AccountDetailsBodyTiteBar  {
                                                font-size: 26px;
                                                font-weight: bold;
                                                color: var(--orange-color);
                                            }
                .AccountDetailsBodyItemBar  {
                                                margin-top: 26px; margin-left: 16px; margin-right: 16px;
                                            }
                    .AccountDetailsBodyItemTiteBar  {
                                                        font-weight: bold;
                                                        margin-bottom: 16px;
                                                    }
                    .AccountDetailsBodyItemDataBar  {
                                                        margin-left: 16px; margin-bottom: 16px;
                                                    }
                        .AccountDetailsBodyItemDataTiteBar  {
                                                                font-weight: bold;
                                                                color: var(--nude-color);
                                                                margin-bottom: 8px;
                                                            }
                        .AccountDetailsBodyItemDataInputBar {
                                                            }
                            .AccountDetailsBodyItemDataInput    {
                                                                    width: clamp( 160px, 100%, 300px );
                                                                    min-width: 160px; max-width: 300px;
                                                                    font-size: 16px;
                                                                    font-weight: bold;
                                                                    color: var(--orange-color);
                                                                    padding: 8px 16px 8px 16px;
                                                                    border: solid 0 transparent;
                                                                    border-radius: 8px;
                                                                }
            #AccountDetailsBodySubButtonBar {
                                                text-align: center;
                                                padding:26px 0 36px 0;
                                            }
                #AccountDetailsBodySubButton    {
                                                    width: 250px;
                                                    font-size: 18px;
                                                    font-weight: bold;
                                                    color:var(--white-color);
                                                    background-color: var(--orange-color);
                                                    padding: 16px 16px 16px 16px;
                                                    border: solid 0 transparent;
                                                    border-radius: 8px;
                                                }
                #AccountDetailsBodySubButton:hover  {
                                                        background-color: var(--brown-color);
                                                    }
                #AccountDetailsBodySubUpdateDetailsButton
                {
                                                    width: 250px;
                                                    font-size: 18px;
                                                    font-weight: bold;
                                                    color:var(--white-color);
                                                    background-color: var(--orange-color);
                                                    padding: 16px 16px 16px 16px;
                                                    border: solid 0 transparent;
                                                    border-radius: 8px;
                }
                #AccountDetailsBodySubUpdateDetailsButton:hover
                {
                                                        background-color: var(--brown-color);
                }   

/* Orders Styling */
    /* Orders Board */
    #OrdersBoard    {
                        background: linear-gradient( to bottom, var( --white-color ), var( --Beige-color ) );
                        padding: 46px 0 46px 0;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }
        /* Orders Title Bar */
        #OrdersTitleBar {
                            width: 100%;
                            font-size: 36px;
                            font-weight: bold;
                            color: var(--nude-color);
                            padding-left: 46px;
                            margin-bottom: 36px;
                        }
        /* Orders Details Bar */
        #OrdersDetailsBar   {
                                font-size: 18px;
                                width: clamp( 250px, 90%, 1000px );
                                min-width: 250px; max-width: 1000px;
                                background-color: white;
                                padding:16px 26px 16px 26px;
                                margin-left: 16px; margin-bottom: 66px; margin-right: 16px;
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                justify-content: space-evenly;
                                column-gap: 46px;
                                row-gap: 26px;
                                border: solid 0 transparent;
                                border-radius: 8px;
                                box-shadow: 0px 0px 4px var(--border-color);
                            }
            #OrdersDetailsTitleBar  {
                                        font-weight: bold;
                                        width: 100%;
                                        color: var(--text-gray-color);
                                        margin-bottom: 16px;
                                    }
        /* Orders List Bar */
        #OrdersListBar  {
                            width: clamp( 250px, 100%, 1000px );
                            min-width: 250px; max-width: 1000px;
                            background-color: transparent;
                            padding: 0 0 0 0;
                            margin-bottom: 46px;
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            justify-content: space-evenly;
                            gap: 26px;
                        }
            /* Order List Item Bar */
            .OrderListItemBar   {
                                    height: 300px;
                                    width: clamp( 250px, 47.4%, 500px);
                                    background-color: transparent;
                                    border: solid 1px var(--border-color);
                                    border-radius: 8px;
                                    display: flex;
                                    flex-direction: column;
                                }
                /* Order List Item Header Bar */
                #OrderListItemHeaderBar {
                                            font-weight: bold;
                                            color: var(--text-gray-color);
                                            padding: 16px 16px 16px 16px;
                                            display: flex;
                                            flex-direction: row;
                                            justify-content: right;
                                        }
                /* Order List Item Quantity Bar */
                #OrderListItemQuantityBar   {
                                                background-color: transparent;
                                                padding: 0 26px 0 26px;
                                                flex-grow: 1;
                                                display: flex;
                                                align-items: center;
                                                justify-content: center;
                                            }
                /* Order List Item Payment Bar */
                #OrderListItemPaymentBar    {
                                                color: var(--text-gray-color);
                                                padding: 16px 16px 16px 16px;
                                                display: flex;
                                                border-top: solid 1px var(--border-color);
                                                flex-direction: row;
                                                flex-wrap: wrap;
                                                justify-content: space-between;
                                                gap: 8px;
                                            }
                /* Order List Item Status Bar */
                #OrderListItemStatusBar {
                                            text-align: right;
                                            color: var( --text-gray-color );
                                            padding: 0 16px 16px 0;
                                        }
                /* Order List Item Options Bar */
                #OrderListItemOptionsBar    {
                                                border-top: solid 1px var(--border-color);
                                                padding: 16px 16px 16px 16px;
                                            }
                    #OrderListItemOptionsCancelButton   {
                                                            font-weight: bold;
                                                            color: var(--text-gray-color);
                                                            background-color: transparent;
                                                            padding: 8px 16px 8px 16px;
                                                            border: solid 0 transparent;
                                                            border-radius: 8px;
                                                        }
                    #OrderListItemOptionsCancelButton:hover {
                                                                color: var(--white-color);
                                                                background-color: var(--nude-color);
                                                            }

/* Elements Styling */
    /* Header Board */
    #HeaderBoard    {
                        height: 106px;
                        background-color: var(--white-color);
                        padding: 16px 16px 16px 16px;
                        border-bottom: solid 1px var(--border-color);
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                    }
        .HeaderBar  {
                        background-color: transparent;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                    }
        #HeaderMenuBar  { 
                            background-color: transparent;
                            padding: 8px 0px 8px 12px;
                            border: solid 0 transparent;
                            border-radius: 8px;
                            gap: 10px;
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;

                            display: none;
                        }
            #HeaderMenuBar img  {
                                    height: 26px; width: 26px;
                                }
            #HeaderMenuBar p    {
                                    font-weight: bold;
                                    margin-top: 6px;
                                }
        #HeaderMenuBar:hover    {
                                }
            #HeaderMenuBar:hover p  {
                                        color: var(--orange-color);
                                    }
        #HeaderTitleBar {
                            font-size: 32px;
                            font-weight: bold;
                            color: var(--nude-color);
                        }
        #HeaderOptionsBar   {
                                background-color: transparent;
                                display: flex;
                                flex-direction: row;
                                gap: 16px;
                                align-items: center;
                            }
            #HeaderOptionsBar p {
                                    font-weight: bold;
                                }
            #HeaderOptionsBar img   {
                                        height: 26px; width: 26px;
                                    }
            #HeaderOptionsAccessBar { background-color: transparent; }
            #HeaderOptionsSearchIcon    {  }
            #HeaderOptionsWishlistIcon  {  }
            #HeaderOptionsAccessBar {
                                        color:var(--brown-color);
                                        background-color: var(--Beige-color);
                                        border: solid 0 transparent;
                                        border-radius: 8px;
                                        padding: 16px 16px 16px 16px;
                                    }
            #HeaderOptionsAccessBar:hover   {
                                                color: var(--white-color);
                                                background-color: var(--orange-color);
                                            }
            #HeaderOptionsCartBar   {
                                        height: 46px;
                                        background-color: transparent;
                                        margin-right: 20px;
                                        display: flex;
                                        flex-direction: row;
                                        align-items: center;
                                        position: relative;
                                    }
                #HeaderOptionsCartBar span  {
                                                height: 24px; width: 24px;
                                                font-weight: bold;
                                                text-align: center;
                                                color: white;
                                                background-color: var( --orange-color );
                                                padding-top: 3px;
                                                border: solid 0 transparent;
                                                border-radius: 26px;
                                                position: absolute;
                                                left: 16px; top: 0;
                                            }
                #HeaderOptionsCartBar p {
                                            margin-top: 6px; margin-left: 20px;
                                        }
                #HeaderOptionsCartBar:hover p   {
                                                    color: var(--orange-color);
                                                }
            #HeaderOptionsLogoutBar {
                                        font-weight: bold;
                                        padding: 16px 16px 16px 16px;
                                        border: solid 0 transparent;
                                        border-radius: 8px;
                                    }
            #HeaderOptionsLogoutBar:hover   {
                                                color: var(--white-color);
                                                background-color: var(--orange-color);
                                            }

    /* Menu Board */
    #MenuBoard  {
                    position: fixed;
                    top: 0; left: 0; right: 0; bottom: 0;
                    background: rgba(0, 0, 0, 0.5);
                    z-index: 1000;
                    overflow-y: auto;
                    overflow-x: hidden;
                    transition: opacity 0.3s, visibility 0.3s;
                }
        /* Menu Bar */
        #MenuBar    {
                        height: 100%; width: 300px;
                        background-color: var(--white-color);
                        display: flex;
                        flex-direction: column;

                        overflow-x: hidden;
                        overflow-y: auto;
                    }
        #MenuBar::-webkit-scrollbar {
                                        width: 4px;
                                        background-color: var(--Beige-color);
                                    }
        #MenuBar::-webkit-scrollbar-thumb   {
                                                width: 4px;
                                                background-color: var(--nude-color);
                                            }
            /* Menu Header Bar */
            #MenuHeaderBar  {
                                height: 66px;

                                padding-right: 16px; padding-left: 16px;

                                display: flex;
                                flex-direction: row;
                                justify-content: space-between;
                                align-items: center;
                            }
                #MenuHeaderBar h1   {
                                        font-size: 26px;
                                        font-weight: bold;
                                        color: var(--nude-color);
                                        margin: 0;
                                    }
                #MenuHeaderCloseBar   {
                                            height: 26px;
                                            width: 90px;
                                            background-color: transparent;
                                            margin-top: 6px;
                                        }
                    #MenuHeaderCloseBar img {
                                                height: 20px; width: 20px;
                                                float: right;
                                                margin-right: 2px;
                                            }
                    #MenuHeaderCloseBar p   { 
                                                font-size: 18px;
                                                font-weight: bold;
                                                float: right;
                                            }
                #MenuHeaderCloseBar:hover p {
                                                color: var(--nude-color);
                                            }
            /* Menu Search Bar
            #MenuSearchBar  {
                                height: 70px;
                                background-color: transparent;
                                padding-right: 8px;
                                border-top: solid 1px var( --border-color );
                                box-shadow: 0px 4px 4px var( --border-color );
                            }
                #MenuSearchBar input    {
                                            height: 70px; width: 240px;
                                            font-size: 16px;
                                            font-weight: bold;
                                            color: var(--nude-color);
                                            background-color: transparent;
                                            padding: 8px 16px 8px 26px;
                                            float: left;
                                            margin-right: 10px;
                                            border: solid 0 transparent;
                                        }
                #MenuSearchBar input:focus  {
                                                outline: none;
                                            }
                #MenuSearchBar img  {
                                        height: 26px; width: 26px;
                                        float: right;
                                        margin-top: 26px; margin-right: 8px;
                                    }
            */
                
            /* Menu Main Bar */
            #MenuMainBar    {
                                height: 230px;
                                background-color: transparent;
                                margin-top: 46px;
                            }
            /* Menu Account Bar */
            #MenuAccountBar {
                                height: 184px;
                                background-color: transparent;
                            }
                /* Menu List */
                .MenuList   {
                                background-color: transparent;
                                margin: 0;
                                list-style-type: none;
                            }
                    .MenuListItem   {
                                        height: 46px;
                                        padding: 16px 8px 16px 12px;
                                        border-bottom: solid 1px var(--border-color);
                                        display: flex;
                                        flex-direction: row;
                                        align-items: center;

                                        position: relative; 
                                        overflow: hidden;
                                    }
                        .MenuListItem img   {
                                                height: 20px; width: 20px;
                                            }
                        .MenuListItem p {
                                            font-size: 18px;
                                            font-weight: bold;
                                            color: var(--text-gray-color);
                                            margin-top: 2px;

                                            
    
                                            /* Absolute positioning within the 300px parent */
                                            position: absolute;
                                            left: 42px; 
                                            transform: translateX(0);
    
                                            /* Transition for the slide effect */
                                            transition: left 0.5s ease, transform 0.5s ease, color 0.3s ease;
                                        }
                    .MenuListItem:hover {
                                            border-bottom: 0;
                                            box-shadow: 0px 4px 4px var(--border-color);                                            
                                        }
                        .MenuListItem:hover p   {
                                                    color: var(--nude-color);

                                                    /* Moves to 50% of the 300px width, then offsets itself to center */
                                                    left: 50%;
                                                    transform: translateX(-50%);
                                                }

    /* Details Board */
    .DetailsBoard   {
                        font-size: 36px;
                        color: white;
                        background-color: #3D3D3D;
                        padding: 36px 26px 36px 26px;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: center;
                    }

        .DetailsBoard img   {
                                height: 26px; width: 26px;
                                margin-right: 16px; margin-left: 16px;
                            }
    /* Footer Board */
    #FooterBoard    {
                        background-color: transparent;
                    }
        #FooterHeaderBar    {
                                background-color: var( --nude-color );
                                display: flex;
                                flex-direction: row;
                                justify-content: space-between;
                                align-items: center; 
                                padding: 16px 16px 16px 16px;
                            }
            #FooterHeaderBar h1 {
                                    font-size: 36px;
                                    color: var(--white-color);
                                }
            #FooterHeaderBar button {
                                        font-weight: bold;
                                        color: var( --white-color );
                                        background-color: transparent;
                                        padding: 8px 16px 8px 16px;
                                        margin-top: 6px;
                                        border: solid 0 transparent;
                                        border-radius: 8px;
                                    }
            #FooterHeaderBar button:hover   {
                                                color: white;
                                                background-color: var( --brown-color );
                                            }
        #FooterBodyBar  {
                            background-color: white;
                            padding: 36px 16px 36px 16px;
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            align-items: start;
                            justify-content: center;
                            row-gap: 46px;
                            column-gap: 26px;
                        }
            .FooterBodySubBar   {
                                    width: 200px;
                                    min-width: 200px; max-width: initial;
                                    background-color: transparent;
                                    display: flex;
                                    flex-direction: column;
                                    gap: 12px;
                                }
            #FooterBodyInfoBar  {
                                    width: clamp( 280px, 40%, 350px);
                                    min-width: 280px; max-width: 350px;
                                }
                .FooterBodyTitleBar {
                                        font-size: 18px;
                                        font-weight: bold;
                                        color: var( --brown-color );
                                        padding-left: 8px;
                                        margin-bottom: 26px;
                                    }
                .FooterBodyDetailsBar       {
                                                height: 36px;
                                                color: var( --text-gray-color );
                                                background-color: transparent;
                                                padding-left: 16px;
                                                display: flex;
                                                align-items: center;
                                                border: solid 0 transparent;
                                            }
                .FooterBodyDetailsBar:hover {
                                                color: var(--brown-color);
                                                border-bottom: solid 2px var(--nude-color);
                                            }
                #FooterBodyAccountAccessBar:hover   {
                                                        height: 46px;
                                                        font-weight: bold;
                                                        color: var(--white-color);
                                                        background-color: var(--brown-color);
                                                        border: solid 0 transparent;
                                                        border-radius: 8px;
                                                    }
                #FooterBodyContactMediaBar  {
                                                flex-direction: row;
                                                flex-wrap: wrap;
                                                justify-content: center;
                                                gap: 16px;
                                            }
                #FooterBodyContactMediaBar:hover    {
                                                        border: solid 0 transparent;
                                                    }                 
                    #FooterBodyContactMediaBar img  {
                                                        height:36px; width: 36px;
                                                        border: solid 0 transparent;
                                                    }
                .FooterBodyInfoSubBar   {
                                            height: 56px;
                                            border-bottom: solid 2px var( --Beige-color );
                                            padding-left: 16px;
                                            display: flex;
                                            align-items: center;
                                        }
                .FooterBodyInfoSubBar:last-child { border-bottom: solid 0 transparent; }
                
        #FooterCopyBar  {
                            padding: 26px 16px 26px 16px;
                            border-top: solid 2px var(--border-color);
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            align-items: center;
                            justify-content: space-evenly;
                            gap: 26px;
                        }
            #FooterCopyTitleBar {
                                    display: flex;
                                    flex-direction: row;
                                    flex-wrap: wrap;
                                }
                #FooterCopyTitleBar p  { height: 18px; }
                #FooterCopyTitleFirstText   {
                                                width: 76px;
                                            }
                #FooterCopyTitleSecondText  {
                                                font-weight: bold;
                                                color: var(--brown-color);
                                                margin-left: 4px; margin-right: 4px;
                                            }
                #FooterCopyTitleThirdText   {
                                                width: 200px;
                                            }
            #FooterCopyPaymentImg   {
                                        width: 250px;
                                        background-color: red;
                                    }

    /* Options Board */
    #OptionsBoard   {
                        width: 100%;
                        background-color: #ffffff;
                        padding-top: 8px; padding-bottom: 8px;
                        box-shadow: 0 -4px 4px var(--border-color);
                        position: fixed;
                        bottom: 0;
                        z-index: 4;

                        display: none;
                    }
        /* Options Bar */
        #OptionsBar {
                        background-color: transparent;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: space-evenly;
                    }
            /* Options Img */
            .OptionsImg {
                            height: 36px; width: 36px;
                            border: solid 0 transparent;
                            border-radius: 8px;
                        }

    /* Message Board */
    #MessageBoard   {
                        width: 100%;
                        background-color: white;
                        padding-top: 56px; padding-bottom: 66px;
                        box-shadow: 0 -4px 4px var(--border-color);
                        display: flex;
                        text-align: center;
                        justify-content: center;
                        position: fixed;
                        bottom: 0;
                        z-index: 5;
                    }
        /* Message Bar */
        #MessageBar {
                        width: clamp( 250px, 90%, 900px );
                        min-width: 250px; max-width: 1200px;
                        background-color: transparent;
                    }
            /* Message Header Bar */
            #MessageHeaderBar   {
                                    padding: 0 16px 26px 16px;
                                    margin-bottom: 56px;
                                    border-bottom: solid 1px var(--Beige-color);
                                    display: flex;
                                    flex-direction: row;
                                    justify-content: space-between;
                                }
            #InputHeaderBar {
                                background-color: transparent;
                                padding: 0 16px 16px 16px;
                                margin-bottom: 16px;
                                border-bottom: solid 1px var(--Beige-color);
                                display: flex;
                                flex-direction: row;
                                justify-content: space-between;
                            }
                /* Message Header Title */
                #MessageHeaderTitle {
                                        color: var(--orange-color);
                                        margin: 0;
                                    }
                /* Message Header Icon */
                #MessageHeaderIcon  {
                                        height: 26px; width: 26px;
                                    }
            /* Message Details Bar */
            #MessageDetailsBar  {
                                    font-size: 18px;
                                    color: var(--text-gray-color);
                                    background-color: transparent;
                                    padding: 26px 0 26px 0;
                                }
            #InputDetailsBar    {
                                    font-size: 18px;
                                    color: var(--text-gray-color);
                                    background-color: transparent;
                                    padding: 8px 0 8px 0;
                                    margin-bottom: 26px;
                                }
            #InputSubBar    {
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                justify-content: center;
                                gap: 36px;
                            }
                #InputSubBar img    {
                                        height: 46px; width: 46px;
                                        border: solid 0 transparent;
                                        border-radius: 8px;
                                        opacity: 0.7;
                                    }
                #InputSubBar img:hover  {
                                            opacity: 1;
                                        }
                #InputSubTextarea   {
                                        height: 100px;
                                        width: clamp( 250px, 70%, 500px );
                                        text-align: center;
                                        font-size: 16px;
                                        font-weight: bold;
                                        padding: 16px 8px 16px 8px;
                                        border: solid 2px var(--border-color);
                                        border-radius: 8px;
                                        overflow-y: auto;
                                        overflow-x: hidden;
                                    }
                #InputSubTextarea::-webkit-scrollbar    {
                                                            width: 0;
                                                            background-color: transparent;
                                                        }
                #InputSubButton     {
                                        height: fit-content;
                                        font-size: 18px;
                                        font-weight: bold;
                                        color: var(--white-color);
                                        background-color: var( --nude-color );
                                        padding: 16px 26px 16px 26px;
                                        margin-top: auto; margin-bottom: 8px;
                                        border: solid 0 transparent;
                                        border-radius: 8px;
                                    }
                #InputSubButton:hover   {
                                            background-color: var(--orange-color);
                                        }

    .WhatsAppImg    {
                        height: 36px; width: 36px;
                        position: fixed;
                        bottom: 46px; right: 8px;
                        z-index: 5;
                        border: solid 0 transparent;
                    }

@media screen and ( min-width: 450px ) and ( max-width: 780px )
{
    /* Horizontal Menu Board */
    #HorizontalMenuBoard { display: none; }

/* index html styling */
    /* Parallax Board */
    .ParallaxBoard  {
                        background-attachment: fixed;
                    }
        .ParallaxBoard h1   {
                                font-size: 30px;
                            }

    /* Poster Board */
                .PosterSlideTextBar {
                                        width: 100%;
                                        margin-left: 26px;
                                        margin-right: 26px;
                                        margin-bottom: 26px;
                                    }
                    .PosterSlideTextBar h1  { font-size: 26px; }

    /* Category Board */
    #CategoryBoard  {
                        padding: 46px 0 46px 0;
                    }

    /* Product Board */
        /* Product Title Bar */
        .ProductTitleBar    {
                                font-size: 30px;
                            }
        /* product Products Bar */

    /* Cart Board */
        /* Cart Title Board */
            /* Cart Title Options Bar */
                #CartTitleOptionsBar p  { font-size: 22px; }
                #CartTitleOptionsBar button {
                                                font-size: 18px;
                                                padding: 8px 8px 8px 8px;
                                            }

    /* Product View Board */
    #ProductViewBoard   {
                        }
        /* Product Title Bar */
        #ProductTitleBar    {
                                font-size: 26px;
                            }
        /* Product Body Bar */
        #ProductBodyBar {
                        }

    /* Product View Board */
    #ProductViewBoard   {
                        }
        /* Product Title Bar
        #ProductTitleBar    {
                                font-size: 20px;
                            }
        */
        /* Product Body Bar */
        #ProductBodyBar {
                            flex-direction: column;
                            padding: 0 0 0 0;
                        }
            /* Product Body Img Bar */
            #ProductBodyImgBar  {
                                    height: initial;
                                    height: 70vh; /* Temporary height */
                                    width: 96vw;
                                    max-width: none;
                                }
            /* Product Body Details Bar */
            #ProductBodyDetailsBar  {
                                        width: 96vw;
                                        padding: 26px 16px 26px 16px;
                                    }

    /* Reviews Board */
    /* News Board */
    #NewsBoard  {
                    padding: 26px 16px 26px 16px;
                    flex-direction: row;
                    gap: 16px;
                }
        /* News Bars */
        .NewsBar    {
                        width: clamp( 270px, 48%, 450px );
                    }
        /* News Letter Bar */
        #NewsLetterBar      {
                                border-right: solid 1px var(--Beige-color);
                                border-bottom: none;
                            }
        /* News Menu Bar */
    /* Blogs Board */

/* account access html styling */
    /* Access Board */
        /* Access Body Bar */
        #AccessBodyBar  {
                            height: 1000px;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                        }
            .AccessFormBar  {   
                                height: 600px;
                                width: clamp( 250px, 100%, 780px );
                                min-width: 250px; max-width: 780px;
                            }
            /* Access Login Form Bar */
            #AccessLoginFormBar {
                                    float: none;
                                    clear: both;
                                } 
            /* Access Signup Form Bar */
            #AccessSingupFormBar    {
                                        float: none;
                                        clear: both;
                                    }
            /* Access Side Panel Bar */
            #AccessSidePanelBar {
                                    height: 600px;
                                    width: clamp( 250px, 100%, 780px );
                                    min-width: 250px; max-width: 780px;
                                    float: none;
                                    clear: both;
                                }
        /* Access Description Bar */

/* Account Forgot Password styling */
    /* Forgot Board */
    #ForgotBoard    {
                        height: 1100px;
                    }
        /* Forgot Body Bar */
        #ForgotBodyBar  {
                            width: clamp( 450px, 100%, 780px );
                            min-width: 450px; max-width: 780px;
                            float: none;
                            clear: both;
                        }
            #ForgotBodySubBar   {}
        /* Forgot Side Panel Bar */
        #ForgotSidePanelBar {
                                width: clamp( 450px, 100%, 780px );
                                min-width: 450px; max-width: 780px;
                                float: none;
                                clear: both;
                            }

/* Reset Password Styling */
    /* Reset Password Board */
    #ResetPasswordBoard { height: 1100px; }
        /* Reset Password Body Bar */
        #ResetPasswordBodyBar   {
                                    width: clamp( 450px, 100%, 780px );
                                    min-width: 450px; max-width: 780px;
                                    float: none;
                                    clear: both;
                                }
            #ResetPasswordBodySubBar    {}          
        /* Reset Password Side Panel Bar */
        #ResetPasswordSidePanelBar  {
                                        width: clamp( 450px, 100%, 780px );
                                        min-width: 450px; max-width: 780px;
                                        float: none;
                                        clear: both;
                                    }

    /* Send Message Board */
    #SendMessageBoard   {
                            height: 1200px;
                        }
        /* Send Message Side Panel Bar */
        #SendMessageSidePanelBar    {
                                        width: clamp( 450px, 100%, 780px );
                                        min-width: 450px; max-width: 780px;
                                        float: none;
                                        clear: both;
                                    }
        /* Send Message Body Bar */
        #SendMessageBodyBar {
                                width: clamp( 450px, 100%, 780px );
                                min-width: 450px; max-width: 780px;
                                float: none;
                                clear: both;
                            }

/* Account Details Styling */
    /* Account Details Bar */
    #AccountDetailsBar  {
                            flex-direction: column;
                        }
        /* Account Details Menu Bar */
        #AccountDetailsMenuBar  {
                                    height: 400px; width: 100%;
                                }
        /* Account Details Body Bar */
        #AccountDetailsBodyBar  {
                                   height:fit-content; width: 100%;
                                   overflow-y: hidden;
                                }

/* Orders styling */
    /* Orders Board */
        /* Orders Title Bar */
        /* Orders Details Bar */
        /* Orders List Bar */
        #OrdersListBar  {
                            padding: 0 16px 0 16px;
                        }
            /* Orders List Item Bar */
            .OrderListItemBar   {
                                    width: clamp( 450px, 100%, 780px );
                                }

/* Elements Styling */
    /* Header Board */
    #HeaderBoard    { padding: 16px 26px 16px 16px; }
            #HeaderMenuBar  { display: flex; }
                #HeaderMenuBar p    { display: initial; }
                #HeaderTitleBar { font-size: 26px; }
                #HeaderOptionsAccessBar, #HeaderOptionsSearchIcon, #HeaderOptionsWishlistIcon  { display: none; }
                #HeaderOptionsCartBar p { display: none; }

    /* Menu Board */
        /* Menu Bar */
        #MenuBar    {
                        width: 300px;
                    }
                #MenuHeaderBar h1   {
                                        font-size: 26px;
                                    }

    /* Details Board */
        .DetailsBoard   {
                            font-size: 30px;
                        }
            .DetailsBoard img   {
                                    height: 20px; width: 20px;
                                }

    /* Footer Board */
    #FooterBoard    { margin-bottom: 56px; }
            #FooterHeaderBar h1 { font-size: 26px; }
        #FooterBodyBar  {
                            padding: 26px 8px 26px 8px;
                            flex-direction: row;
                        }
            .FooterBodySubBar   {
                                    width: clamp( 250px, 25%, 400px );
                                    min-width:250px; max-width: 400px;
                                }
            #FooterBodyInfoBar  {
                                    width: clamp( 250px, 30%, 400px);
                                    min-width: 250px; max-width: 400px;
                                }

    /* Send Message Board */
    #SendMessageBoard   { margin-bottom: 56px; }

    /* Options Board */
    /* Options Board */
    #OptionsBoard   { display: block; }
        /* Options Bar */
}

@media screen and ( min-width: 1px ) and ( max-width: 450px )
{
    /* Horizontal Menu Board */
    #HorizontalMenuBoard { display: none; }
    
/* index html styling */
    /* Parallax Board */
    .ParallaxBoard  {
                        background-attachment: scroll;
                    }
        .ParallaxBoard h1   {
                                font-size: 26px;
                            }

    /* Poster Board */
                .PosterSlideTextBar {
                                        width: 100%;
                                        margin-left: 26px;
                                        margin-right: 26px;
                                        margin-bottom: 26px;
                                    } 
                    .PosterSlideTextBar h1  { font-size: 20px; }
        
    /* Category Board */
    #CategoryBoard  {
                        padding: 36px 0 36px 0;
                    }

    /* Product Board */
        /* Product Title Bar */
        .ProductTitleBar    {
                                font-size: 26px;
                            }
        /* Product Products Bar */
            
    /* Cart Board */
        /* Cart Title Board */
            /* Cart Title Options Bar */
                #CartTitleOptionsBar p  { font-size: 18px; }
                #CartTitleOptionsBar button {
                                                font-size: 16px;
                                                padding: 8px 8px 8px 8px;
                                            }
    /* Product View Board */
    #ProductViewBoard   {
                        }
        /* Product Title Bar
        #ProductTitleBar    {
                                font-size: 20px;
                            }
        */
        /* Product Body Bar */
        #ProductBodyBar {
                            flex-direction: column;
                            padding: 0 0 0 0;
                        }
            /* Product Body Img Bar */
            #ProductBodyImgBar  {
                                    height: initial;
                                    height: 50vh; /* Temporary height */
                                    width: 94vw;
                                    max-width: none;
                                }
            /* Product Body Details Bar */
            #ProductBodyDetailsBar  {
                                        width: 100vw;
                                        padding: 26px 16px 26px 16px;
                                    }

    /* Reviews Board */
    /* News Board */
    #NewsBoard  {
                    padding: 16px 8px 16px 8px;
                    flex-direction: column;
                    gap: 16px;
                }
        /* News Bars */
        .NewsBar    {
                        width: clamp( 250px, 100%, 470px );
                    }
        /* News Letter Bar */
        #NewsLetterBar      {
                                border-right: none;
                                border-bottom: solid 1px var(--Beige-color);
                            }
        /* News Menu Bar */
    /* Blogs Board */

/* account access html styling */
    /* Access Board */
        /* Access Body Bar */
        #AccessBodyBar  {
                            height: 951px;
                            background-color: transparent;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                        }
            .AccessFormBar  {   
                                height: 600px;
                                width: clamp( 250px, 100%, 450px );
                                min-width: 250px; max-width: 450px;
                            }
            /* Access Login Form Bar */
            #AccessLoginFormBar {
                                    float: none;
                                    clear: both;
                                } 
            /* Access Signup Form Bar */
            #AccessSingupFormBar    {
                                        float: none;
                                        clear: both;
                                    }
            /* Access Side Panel Bar */
            #AccessSidePanelBar {
                                    height: 450px;
                                    width: clamp( 250px, 100%, 450px );
                                    min-width: 250px; max-width: 450px;
                                    float: none;
                                    clear: both;
                                }
                /* Access Side Panel Sub Bar */
                .AccessSidePanelSubBar  {
                                        }
        /* Access Description Bar */

/* Account Forgot Password styling */
    /* Forgot Board */
    #ForgotBoard    {
                        height: 1100px;
                    }
        /* Forgot Body Bar */
        #ForgotBodyBar  {
                            width: clamp( 250px, 100%, 450px );
                            min-width: 250px; max-width: 450px;
                            float: none;
                            clear: both;
                        }
            #ForgotBodySubBar   {}
        /* Forgot Side Panel Bar */
        #ForgotSidePanelBar {
                                width: clamp( 250px, 100%, 450px );
                                min-width: 250px; max-width: 450px;
                                float: none;
                                clear: both;
                            }
                        
/* Reset Password Styling */
    /* Reset Password Board */
    #ResetPasswordBoard { height: 1100px; }
        /* Reset Password Body Bar */
        #ResetPasswordBodyBar   {
                                    width: clamp( 250px, 100%, 450px );
                                    min-width: 250px; max-width: 450px;
                                    float: none;
                                    clear: both;
                                }
            #ResetPasswordBodySubBar    {}          
        /* Reset Password Side Panel Bar */
        #ResetPasswordSidePanelBar  {
                                        width: clamp( 250px, 100%, 450px );
                                        min-width: 250px; max-width: 450px;
                                        float: none;
                                        clear: both;
                                    }

/* Send Message Stying */
    /* Send Message Board */
    #SendMessageBoard   {
                            height: 1200px;
                        }
        /* Send Message Side Panel Bar */
        #SendMessageSidePanelBar    {
                                        width: clamp( 250px, 100%, 450px );
                                        min-width: 250px; max-width: 450px;
                                        float: none;
                                        clear: both;
                                    }
        /* Send Message Body Bar */
        #SendMessageBodyBar {
                                width: clamp( 250px, 100%, 450px );
                                min-width: 250px; max-width: 450px;
                                float: none;
                                clear: both;
                            }

/* Account Details Styling */
    /* Account Details Bar */
    #AccountDetailsBar  {
                            flex-direction: column;
                        }
        /* Account Details Menu Bar */
        #AccountDetailsMenuBar  {
                                    height: 380px; width: 100%;
                                }
        /* Account Details Body Bar */
        #AccountDetailsBodyBar  {
                                   height:fit-content; width: 100%;
                                   padding: 26px 0 26px 0;
                                   overflow-y: hidden;
                                }

/* Orders styling */
    /* Orders Board */
        /* Orders Title Bar */
        /* Orders Details Bar */
        /* Orders List Bar */
        #OrdersListBar  {
                            padding: 0 16px 0 16px;
                        }
            /* Orders List Item Bar */
            .OrderListItemBar   {
                                    width: clamp( 250px, 100%, 500px );
                                }

/* Elements Styling */
    /* Header Board */
    #HeaderBoard    { padding: 16px 26px 16px 4px; }
            #HeaderMenuBar  { display: flex; }
                #HeaderMenuBar p    { display: none; }
                #HeaderTitleBar { font-size: 20px; }
                #HeaderOptionsBar { gap: 0; }
                    #HeaderOptionsAccessBar, #HeaderOptionsSearchIcon, #HeaderOptionsWishlistIcon  { display: none; }
                    #HeaderOptionsCartBar p { display: none; }

    /* Menu Board */
        /* Menu Bar */
        #MenuBar    {
                        width: 100%;
                    }
                #MenuHeaderBar h1   {
                                        font-size: 20px;
                                    }

        /* Details Board */
        .DetailsBoard   {
                            font-size: 26px;
                        }
            .DetailsBoard img   {
                                    height: 16px; width: 16px;
                                }

    /* Footer Board */
    #FooterBoard    { margin-bottom: 56px; }
            #FooterHeaderBar h1 { font-size: 20px; }

        #FooterBodyBar  {
                            padding: 16px 0 16px 0;
                            flex-direction: column;
                        }
            .FooterBodySubBar   {
                                    width: clamp( 250px, 100%, 450px );
                                    min-width: 250px; max-width: 450px;
                                }
            #FooterBodyInfoBar  {
                                    width: clamp( 250px, 100%, 450px);
                                    min-width: 250px; max-width: 450px;
                                }

    /* Options Board */
    #OptionsBoard   { display: block; }
        /* Options Bar */
}