:root   {
            --cyan-blue: #37B5E7;
            --background-gray: RGB( 250, 250, 250 );
            --darker-background-gray: RGB( 246, 246, 246);
            --border-gray: RGB( 220, 220, 220 );
            --text-dark-gray: RGB( 160, 160, 160 );
            --text-gray: RGB( 180, 180, 180 );
        }
*   { 
        font-family: Arial, Helvetica, sans-serif;
        box-sizing: border-box;
    }
body    {
            background-color: white;
            padding: 0;
            margin: 0;
            overflow-y: auto;
            overflow-x: hidden;
        }
body::-webkit-scrollbar {
                            background-color: transparent;
                            width: 0;
                        }
p { margin: 0; }
a, a:hover, a:active, a:visited, a:focus    {
                                                color: var(--text-gray);
                                                text-decoration: none;
                                            }
    /* Header board */
    .headerboard    {
                        width: 100%;
                        height: 100px;
                        background-color: white;
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                    }
        .headerlogobar  {
                            height: 100%;
                            padding: 8px 16px;
                        }
            .headerlogo     {
                                height: 60px; width: 60px;
                                width: auto;
                                float: left;
                                margin-top: 16px; margin-left: 16px;
                            }
            .headerlogotext {
                                font-size: 26px;
                                font-weight: bold;
                                color: RGB( 180, 180, 180 );    
                                margin-top: 36px; margin-left: 10px;
                                float: right;
                            }
        .headerdescriptionbar   {
                                    height: fit-content;
                                    text-align: right;
                                    background-color: transparent;
                                    width: clamp( 350px, 45%, 900px );
                                    min-width: 350px; max-width: 900px;
                                    font-weight: bold;
                                    margin-top: 16px; margin-right: 26px;
                                }
            .headerdescriptionbar p { color: var(--text-dark-gray); }
    /* Cover Board */
    .CoverBoard {
                    height: 70vh; min-height: 290px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    align-items: end;
                    justify-content: top;
                    position: relative;
                }
        .CoverBoard::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-image: url( 'images/cover_background_img.png' );
                    background-size: cover;
                    background-position: top right;
                    background-repeat: no-repeat;
                    filter: blur(6px);
                    z-index: -1;
                }
        .CoverSubBar    {
                            background-color: transparent;
                            margin-top: 36px; margin-right: 36px;
                            background-color: transparent;
                        }
            .CoverTitleText {
                                font-size: 36px;
                                font-weight: bold;
                            }
                .CoverTitleSubText  {   color: var(--cyan-blue);     }
            .CoverDescriptionText   {
                                        font-size: 18px;
                                        color: black;
                                        margin-top: 6px;
                                    }
            .CoverButton    {
                                width: fit-content;
                                min-width: 200px;
                                font-size: 18px;
                                font-weight: bold;
                                color: white;
                                background-color: var(--cyan-blue);
                                padding: 16px 26px 16px 26px;
                                margin-top: 16px; margin-left: 26px;
                                border: solid 3px transparent;
                                border-radius: 8px;
                            }
            .CoverButton:hover  {
                                    background-color: transparent;
                                    border-color: var(--cyan-blue);
                                }
    /* Dash Board */
    #DashBoard  {
                    background-color: white;

                    padding: 46px 0 36px 0;

                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    gap: 16px;
                }
        .DashDatabBar   {
                            height: 100px;
                            width: clamp( 150px, 20%, 250px );
                            min-width: 150px; max-width: 250px;
                            text-align: center;
                            background-color: transparent;
                            padding: 0;
                            margin: 0;

                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: start;
                        }
            .DashDataImg    {
                                height: 26px; width: 26px;
                                margin-bottom: 10px;
                            }
            .DashDataQuantity   {
                                    font-size: 20px;
                                    font-weight: bold;
                                    margin-bottom: 6px;
                                }
            .DashDataText   {
                                font-size: 16px;
                                color: var(--text-gray);
                            }
    /* About Us Board */
    #AboutUsBoard   {
                        background-color: var(--background-gray);
                        padding: 66px 8px 66px 8px;

                        border-bottom: solid 2px;
                        border-color: var(--border-gray);

                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
        #AboutUsBar {
                        width: clamp ( 250px, 90%, 1400px  );
                        min-width: 250px; max-width: 1400px;
                        background: linear-gradient( 45deg, #124FA2, #1D8EC8 );
                        padding: 36px 0 36px 0;
                        border: solid 0 transparent;
                        border-radius: 8px;
                    }
            #AboutUsBarHeaderBar    {
                                        text-align: center;
                                        margin-bottom: 26px;
                                    }
                #AboutUsBarHeaderBar h1 {
                                            font-size: 36px;
                                            color: white;
                                            margin: 0;
                                        }
            #AboutUsDetailsBar  {
                                    display: flex;
                                    flex-direction: row;
                                    flex-wrap: wrap;
                                    justify-content: space-evenly;
                                    align-items: center;
                                    gap: 26px;
                                }
                .AboutUsDetailsSubBar   {
                                            width: clamp( 250px, 31%, 500px );
                                            min-width: 250px; max-width: 550px;
                                            display: flex;
                                            flex-direction: column;
                                            text-align: center;
                                        }
                    .AboutUsDetailsSubImg   {
                                                height: 250px; width: 100%;
                                                margin-bottom: 16px;
                                                border: solid 0 transparent;
                                                border-radius: 8px;
                                                object-fit: cover;
                                                object-position: right center;
                                            }
                    .AboutUsDetailsSubTitleText {
                                                    font-size: 16px;
                                                    color: white;
                                                    margin-right: 16px; margin-left: 16px;
                                                } 
    /* Services Board */
    #ServicesBoard  {
                        text-align: center;
                        padding: 66px 16px 66px 16px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                    }
        #ServicesBoard h1   { font-size: 36px; }
        #ServicesBoard h2   { font-size: 23px; } 
        #ServicesBoard h1, #ServicesBoard h2   {
                                                padding: 0;
                                                margin: 0;
                                            }
        #ServicesBoard > p  {
                                color: var(--text-gray);
                                margin-top: 10px;
                            }
        .ServicesListBar    {
                                Width: 100%;
                                margin-top: 36px;
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                align-items: center;
                                justify-content: center;
                                gap: 16px;
                            }
        .SecondList {
                        margin-top: 16px;
                        display: none;
                    }
            .ServicesListItemBar    {
                                        height: 220px;
                                        width: clamp( 250px, 20%, 300px );
                                        min-width: 250px; max-width: 400px;
                                        font-size: 16px;
                                        background-color: transparent;
                                        padding: 16px 16px 0 16px;
                                        border:solid 1px var(--border-gray);
                                        border-radius: 8px;
                                        display: flex;
                                        flex-direction: column;
                                        align-items: start;
                                        justify-content: start;
                                        gap: 16px;
                                    }
            .ServicesListItemBar:hover  {
                                            box-shadow: 0 8px 25px var(--text-gray);
                                        }
                .ServicesListItemImg    {
                                            height: 36px; width: 36px;
                                            border: solid 0 transparent;
                                            border-radius: 8px;
                                        }
                .ServicesListItemTitle  {
                                            font-weight: bold;
                                        }
                .ServicesListItemSubBar     {
                                                text-align: left;
                                                color: var(--text-dark-gray);
                                                padding: 0;
                                                margin: 0; margin-left: 18px;
                                                list-style-type: disc;
                                            }
                .ServicesListItemSubBar li  {
                                                margin-bottom: 6px;
                                            }
        .ServicesButtonBar  {
                                margin-top: 36px;
                                margin-right: 8px; margin-left: 8px;
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                align-items: center;
                                justify-content: center;
                                column-gap: 16px;
                                row-gap: 10px;
                            }
            .ServiceButton  {
                                font-weight: bold;
                                color: black;
                                background-color: white;
                                padding: 8px 8px 8px 16px;
                                border: solid 1px var(--border-gray);
                                border-radius: 8px;
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                justify-content: center;
                            }
            .ServiceButton:hover    {
                                        color: white;
                                        background-color: var(--cyan-blue);
                                        border-color: transparent;
                                    }
                .ServiceButton p    {
                                        font-size: 16px;
                                    }
                .ServiceButton img  {
                                        height: 26px; width: 26px;
                                        margin-left: 16px;
                                        border: solid 0 transparent;
                                        border-radius: 8px;
                                    }
            
    /* Featured Board */


    /* Contact Board */
    .ContactBoard   {
                        background-color: transparent;
                    }
        /* Contact Action Bar */
        .ContactActionBar   {
                                padding: 66px 66px 66px 66px;
                                border-top:solid 2px var(--border-gray);
                            }
            .ContactActionSubBar    {
                                        background: linear-gradient( 45deg, #124FA2, #1D8EC8 );
                                        padding: 36px 16px 36px 16px;
                                        border: solid 0 transparent;
                                        border-radius: 8px;
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                    }
                .ContactActionTitleText {
                                            font-size: 26px;
                                            color: white;
                                            margin: 0;
                                        }
                .ContactActionDescription   {
                                                color: var( --border-gray );
                                                margin-top: 8px;
                                            }
                .ContactActionOptions   {
                                            margin-top: 26px;
                                            display: flex;
                                            flex-direction: row;
                                            flex-wrap: wrap;
                                            align-items: center;
                                            justify-content: center;
                                            gap: 16px;
                                        }
                    .ContactActionOptionsButton {
                                                    font-size: 16px;
                                                    font-weight: bold;
                                                    background-color: var(--background-gray);
                                                    padding: 16px 26px 16px 26px;
                                                    border: solid 2px transparent;
                                                    border-radius: 8px;
                                                } 
                    .ContactActionOptionsButton:hover   {
                                                            color: white;
                                                            background-color: transparent;
                                                            border-color: var(--border-gray);
                                                        }
        /* Contact Form Bar */
        .ContactFormBoard   {
                                background: linear-gradient( to bottom, var(--background-gray), white );
                                padding: 46px 66px 46px 66px;
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                align-items: start;
                                justify-content: center;
                                gap: 26px;
                                display: none;
                            }
            #ContactFormTitleBar    {
                                        width: 100%;
                                        text-align: center;
                                        margin-bottom: 46px;
                                    }
                #ContactFormTitleBar h1 { margin: 0; margin-bottom: 8px; }
                #ContactFormTitleBar p { color: var(--text-dark-gray); }
            .ContactFormBar {
                            }
                .LayoutBar  {
                                width: clamp( 250px, 70%, 650px );
                                min-width: 250px; max-width: 650px;
                                background-color: transparent;
                                padding: 26px 16px 26px 26px;
                                border: solid 2px var(--border-gray);
                                border-radius: 8px;
                            }
                    .ContactFormLayoutBar   {
                                                background-color: transparent;
                                                margin-top: 16px;
                                                display: flex;
                                                flex-direction: row;
                                                flex-wrap: wrap;
                                                gap: 16px;
                                            }
                        .ContactFormLayoutSubBar    {
                                                        width: clamp( 200px, 48.5%, 400px );
                                                        min-width: 200px; max-width: 400px;
                                                        background-color: transparent;
                                                        display: flex;
                                                        flex-direction: column;
                                                        gap: 8px;
                                                    }
                            .ContactFormLayoutSubBar > p    {
                                                                color: var(--text-dark-gray);
                                                            }
                            .ContactFormLayoutSubBar > input    {
                                                                    padding: 8px 16px 8px 16px;
                                                                    border: solid 1px var(--border-gray);
                                                                    border-radius: 8px;
                                                                }
                    .ContactFormLayoutBar.TitleBar  {
                                                        margin-top: 0;
                                                        flex-direction: column;
                                                        gap: 8px;
                                                    }
                        .ContactFormLayoutBar.TitleBar > h1 {
                                                                font-size: 26px;
                                                                padding: 0;
                                                                margin: 0;
                                                            }
                    .ContactFormLayoutBar.UserDetailsBar    {
                                                                margin-top: 36px;
                                                            }
                    .ContactFormLayoutBar.ProjectBar    {
                                                            flex-direction: column;
                                                            gap: 8px;
                                                        }
                        .ContactFormLayoutBar.ProjectBar > p    {
                                                                    color: var(--text-dark-gray);
                                                                }
                        .ContactFormLayoutBar.ProjectBar > textarea {
                                                                        height: 80px;
                                                                        padding: 8px 16px 8px 16px;
                                                                        border: solid 1px var(--border-gray);
                                                                        border-radius: 8px;
                                                                    }
                    .ContactFormLayoutBar.SubmitBar {
                                                        display: flex;
                                                        flex-direction: row;
                                                        justify-content: space-between;
                                                    }
                        .ContactFormLayoutBar.SubmitBar > button    {
                                                                        font-weight: bold;
                                                                        color: white;
                                                                        background: linear-gradient( 45deg, #124FA2, #1D8EC8 );
                                                                        padding: 10px 16px 10px 16px;
                                                                        border: solid 0 transparent;
                                                                        border-radius: 8px;
                                                                        display: flex;
                                                                        flex-direction: row;
                                                                        align-items: center;
                                                                    }
                            .ContactFormLayoutBar.SubmitBar > button > img  {
                                                                                height: 20px; width: 20px;
                                                                                margin-left: 8px;
                                                                            }
                        .ContactFormLayoutBar.SubmitBar > button:hover  {
                                                                            background: var(--cyan-blue);
                                                                        }
                
                .DetailsBar {
                                height: fit-content;
                                width: clamp ( 250px, 30%, 350px );
                                min-width: 250px; max-width: 300px;
                                display: flex;
                                flex-direction: column;
                                gap: 16px;
                            }
                    .ContactFormDetailsSubBar   {
                                                    padding: 26px 16px 26px 26px;
                                                    border: solid 2px var(--border-gray);
                                                    border-radius: 8px;
                                                    display: flex;
                                                    flex-direction: column;
                                                    gap: 10px;
                                                }
                        .ContactFormDetailsSubHeaderBar {
                                                            display: flex;
                                                            flex-direction: row;
                                                            align-items: center;
                                                        }                   
                            .ContactFormDetailsSubHeaderBar > img.Img   {
                                                                            height: 20px; width: 20px;
                                                                            margin-right: 8px;
                                                                        }
                            .ContactFormDetailsSubHeaderBar > p.Title {
                                                                    font-size: 18px;
                                                                    font-weight: bold;
                                                                }
                            .ContactFormDetailsSubBar > p.Description   {
                                                                    color: var(--text-gray);
                                                                        }
                        .ContactFormDetailsSubListBar   {
                                                            background-color: transparent;
                                                            padding: 0;
                                                            margin: 0;
                                                            list-style: none;
                                                        }
                            .ContactFormDetailsSubListItemBar   {
                                                                    margin-bottom: 8px;
                                                                    display: flex;
                                                                    flex-direction: row;
                                                                    align-items: center;
                                                                }
                                .ContactFormDetailsSubListItemBar img   {
                                                                            height: 20px; width: 20px;
                                                                            margin-right: 8px;
                                                                        }
                                .ContactFormDetailsSubListItemBar p {
                                                                        color: var(--text-gray);
                                                                    }
                    .InfomrationBar {}
                    .ResponeBar {}
                        .ResponeBar > .ContactFormDetailsSubHeaderBar   { align-items: center; }
                    .MessageBar {
                                    background: linear-gradient( 45deg, #124FA2, #1D8EC8 );
                                    border: solid 0 transparent;
                                    align-items: center;
                                }
                        .MessageBar > .ContactFormDetailsSubHeaderBar p.Title { color: white; }
                        .MessageBar > p.Description {
                                                        text-align: center;
                                                        color: var(--border-gray);
                                                    }

    /* Footer Board */
    #FooterBoard    {
                        height: fit-content;
                        width: 100%;
                        background-color: var(--background-gray);
                        padding: 26px 16px 26px 16px;
                        margin: 0;
                    }
        /* Header Bar */
        #FooterHeaderBar    {
                                text-align: center;
                                padding-bottom: 16px;
                                border-bottom: solid 2px RGB( 230, 230, 230 );
                            }
            /* Title*/
            #FooterHeaderTitleText  {
                                        font-size: 22px;
                                        font-weight: bold;
                                        color: var(--cyan-blue);
                                        margin-bottom: 6px;
                                    }
            /* Description Bar */
            #FooterHeaderDescrtiptionText   {
                                                color: var(--text-gray);
                                            }
        /* Sub Bar */
        #FooterSubBar   {
                            background-color: transparent;
                            padding: 16px; padding-top: 36px;

                            display: flex;
                            flex-direction: row;
                            align-items: start;
                            justify-content: center;
                            flex-wrap: wrap;
                            gap: 26px;
                        }
            .FooterSubChildBar  {
                                    height: 160px;
                                    background-color: transparent;
                                    border:solid 0 transparent;

                                    max-width: 300px;
                                    flex: 1 1 200px;
                                }
            #FooterSubChildConnectBar   {
                                            height: fit-content;
                                            background-color: transparent;
                                            padding-bottom: 16px;
                                        }
                .FooterSubChildTitleText{
                                            font-size: 18px;
                                            font-weight: bold;
                                            color: var(--text-dark-gray);
                                        }
                .FooterSubChildList {
                                        list-style: none;

                                        padding: 0;
                                        margin-top: 16px; margin-left: 16px; margin-bottom: 0; margin-right: 0;
                                    }
                    .FooterSubChildList li  {
                                                height: fit-content;
                                                min-height: 30px;
                                                background-color: transparent;
                                                margin-bottom: 6px;
                                                display: -webkit-box;
                                            }
                    .FooterSubChildList li > a:hover    {
                                                            color: black;
                                                        }
                    .FooterSubChildList li > p     {
                                                        color: var(--text-gray);
                                                        margin-top: 6px;
                                                        float: left;
                                                    }
                    .FooterSubChildListIcon         {
                                                        height: 20px;
                                                        width: 20px;
                                                        margin-right: 8px;
                                                        border: solid 0 transparent;
                                                        border-radius: 4px;
                                                        float: left;
                                                    }
        /* Copy Bar */
        #FooterCopyBar  {
                            text-align: center;
                            padding-top: 16px;
                            border-top: solid 2px var(--border-gray);
                        }
            #footerCopyText { color: var(--text-gray);}

    /* Popup Boards */
    .PopupBoard {
                    height: 100%; width: 100%;
                    background-color: var(--darker-background-gray);
                    padding: 36px 16px 36px 16px;
                    position: fixed;
                    top: 0; left: 0;
                    z-index: 2;

                    display: none;
                    align-items: start;
                    justify-content: center;

                    overflow-y: auto;
                    overflow-x: hidden;
                }
    .PopupBoard::-webkit-scrollbar  {
                                        width: 2px;
                                        background-color: var(--border-gray);
                                    }
    .PopupBoard::-webkit-scrollbar-thumb    {
                                                background-color: var(--cyan-blue);
                                            }
        .PopupBar   {
                        width: clamp( 250px, 100%, 950px );
                        min-width: 250px; max-width: 950px;
                        background-color: transparent;
                    }
            .PopupHeaderBar {
                                background-color: transparent;
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                align-items: center;
                                justify-content: space-between;
                            }
                .PopupHeaderBar h1  {
                                        font-weight: bold;
                                        margin: 0;
                                    }
                .PopupHeaderBar button  {
                                            font-size: 16px;
                                            font-weight: bold;
                                            color: var(--text-gray);
                                            background-color: transparent;
                                            padding: 8px 16px 8px 16px;
                                            margin-top: 8px;
                                            border: solid 2px transparent;
                                            border-radius: 8px;
                                        }
                .PopupHeaderBar button:hover    {
                                                    color: black;
                                                    border-color: var(--cyan-blue);
                                                }
            .PopupSubBar    {
                                background-color: white;
                                padding: 26px 16px 26px 16px;
                                margin-top: 20px;
                                border: solid 0 transparent;
                                border-radius: 8px;
                                display: flex;
                                flex-direction: column;
                                gap: 10px;
                            }
            .PopupSubHorizontalBar  {
                                        display: flex;
                                        flex-direction: row;
                                        flex-wrap: wrap;
                                        justify-content: space-evenly;
                                        gap: 16px;
                                    }
                    .PopupSubHorizontalBar div  {
                                                    width: clamp( 150px, 47.5%, 500px );
                                                    min-width: 150px; max-width: 450px;
                                                }
                .PopupSubBar h1 {
                                    font-size: 24px;
                                    font-weight: bold;
                                    margin:0; margin-bottom: 10px;
                                }
                .PopupSubBar p  {
                                    color: var(--text-dark-gray);
                                }
                    
    /* Business Information Board */
    #BusinessInfoBoard  {                        
                        }
        /* Header Bar */
        /* Director Bar */
            #DirectorSubBar {
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                text-align: start;
                                justify-content: center;
                                gap: 26px;
                            }
                #DirectorSubBar img {
                                        width: clamp( 250px, 30%, 350px );
                                        min-width: 250px; max-width: 350px;
                                        height: 30vh;
                                        object-fit: cover;
                                        object-position: top;
                                        border: solid 0 transparent;
                                        border-radius: 8px;
                                    }
                #DirectorSubBar div {
                                        width: clamp( 250px, 58%, 600px );
                                        min-width: 250px; max-width: 600px;
                                        text-align: start;
                                        background-color: transparent;
                                        padding-top: 16px;
                                    }
                    #DirectorTitleText  {
                                            font-size: 22px;
                                            font-weight: bold;
                                            text-align: center;
                                            margin-bottom: 10px;
                                            color: black;
                                        }
                    .DirectorDetailsText    {
                                                color: var(--text-dark-gray);
                                                margin-left: 16px; margin-bottom: 10px;
                                            }
        /* Contact Bar */
        #ContactBar {
                        background: linear-gradient( 45deg, #124FA2, #1D8EC8 );
                        padding: 26px 16px 26px 16px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                    }
            #ContactBar h1  {
                                color: white;
                            }
            #ContactBar p   {
                                color: var(--text-gray);
                                margin-bottom: 16px;
                            }
            #ContactBar a > button    {
                                        width: clamp( 150px, 80%, 250px );
                                        min-width: 150px; max-width: 250px;
                                        font-size: 16px;
                                        font-weight: bold;
                                        padding: 8px 16px 8px 16px;
                                        background-color: white;
                                        border: solid 2px transparent;
                                        border-radius: 8px;
                                    }
            #ContactBar a > button:hover  {
                                            color: white;
                                            background-color: transparent;
                                            border-color: var(--cyan-blue);
                                        }
                    
    /* Client Reviews Board / Create Review Board */
    #ClientReviewsBoard {
                        }
    #CreateReviewBoard  {
                        }
        #ClientReviewsBar, #CreateReviewBar {
                                                padding: 46px 16px 46px 16px;
                                            }
            #ClientReviewsHeaderBar, #CreateReviewHeaderBar {
                                                                text-align: center;
                                                                margin-bottom: 26px;
                                                            }
                #ClientReviewsHeaderBar h1, #CreateReviewHeaderBar h1   {
                                                                            margin: 0; margin-bottom: 8px;
                                                                        }
                #ClientReviewsHeaderBar p, #CreateReviewHeaderBar p
                {
                    color: var(--text-dark-gray);
                }
            #ClientReviewsOptionsBar, #CreateReviewOptionsBar   {
                                                                    text-align: center;
                                                                    margin-bottom: 66px;
                                                                    display: flex;
                                                                    flex-direction: row;
                                                                    flex-wrap: wrap;
                                                                    justify-content: center;
                                                                    gap: 10px;
                                                                }
                #ClientReviewsOptionsBar button, #CreateReviewOptionsBar button {
                                                    width: clamp( 250px, 40%, 300px );
                                                    font-size: 16px;
                                                    font-weight: bold;
                                                    padding: 8px 16px 8px 16px;
                                                    border: solid 2px transparent;
                                                    border-radius: 8px;
                                                }
                    #ClientReviewsOptionsCreateButton, #CreateReviewOptionsViewReviewsButton   {
                                                            color: white;
                                                            background-color: var(--cyan-blue);
                                                        }
                    #ClientReviewsOptionsCreateButton:hover, #CreateReviewOptionsViewReviewsButton:hover {
                                                                color: black;
                                                                background-color: var(--darker-background-gray);
                                                                border-color: var(--border-gray);
                                                            }
                    #ClientReviewsOptionsBackButton, #CreateReviewOptionsBackButton     {
                                                            color: var(--text-dark-gray);
                                                            background-color: var(--darker-background-gray);
                                                        }
                    #ClientReviewsOptionsBackButton:hover, #CreateReviewOptionsBackButton:hover   {
                                                                color: black;
                                                                border-color: var(--cyan-blue);
                                                            }
            #ClientReviewsDetailsBar    {
                                            background-color: transparent;
                                            display: flex;
                                            flex-direction: row;
                                            flex-wrap: wrap;
                                            text-align: start;
                                            justify-content: center;
                                            align-items: start;
                                            gap: 26px;
                                        }
                .ClientReviewsDetailsSubBar {
                                                height: fit-content;
                                                width: clamp( 250px ,31%, 400px );
                                                min-width: 250px; max-width: 400px;
                                                background-color: transparent;
                                            }
                    .ClientReviewsDetailsSubBar:hover  {   box-shadow: 0 8px 25px var(--text-gray);    }
                    .ClientReviewsDetailsTitleBar   {
                                                        height: 100px;
                                                        background: linear-gradient( 45deg, #124FA2, #1D8EC8 );
                                                        border: solid 0 transparent;
                                                        border-top-left-radius: 8px; border-top-right-radius: 8px;
                                                        position: relative;
                                                    }
                        .ClientReviewsDetailsTitleBar div   {
                                                                height: fit-content;
                                                                background-color: transparent;
                                                                position: absolute;
                                                                bottom: 16px;
                                                            }
                        .ClientReviewsDetailsTitleNameBar   {
                                                                width: 70%;
                                                                font-size: 18px;
                                                                font-weight: bold;
                                                                color: white;
                                                                left: 16px;
                                                            }
                        .ClientReviewsDetailsTitleRateBar   {
                                                                height: 16px;
                                                                width: 40px;
                                                                right: 16px;
                                                            }
                            .ClientReviewsDetailsTitleRateBar p    {
                                                                        color:white;
                                                                        margin-top: 2px; margin-right: 6px;
                                                                        float: left;
                                                                    }
                            .ClientReviewsDetailsTitleRateBar img   {
                                                                        height: 20px; width: 20px;
                                                                        float: left;
                                                                    }
                    .ClientReviewsDetailsContainerBar   {
                                                            height: 170px;
                                                            color: var(--text-dark-gray);
                                                            padding: 26px 16px 26px 16px;
                                                            border-right: solid; border-bottom: solid; border-left: solid; border-width: 1px; border-color: var(--border-gray);
                                                            border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;
                                                            overflow-y: auto;
                                                            overflow-x: hidden;
                                                        }
                    .ClientReviewsDetailsContainerBar::-webkit-scrollbar    {
                                                                                width: 2px;
                                                                                background-color: var(--text-dark-gray);
                                                                            }
                    .ClientReviewsDetailsContainerBar::-webkit-scrollbar-thumb  {
                                                                                    background-color: var(--cyan-blue);
                                                                                }


    /* Create Reviews Board */
    #CreateReviewBoard  {
                        }
        #CreateReviewBar   {
                            }
            #CreateReviewHeaderBar {}
            #CreateReviewOptionsBar    {}
            #CreateReviewFormBar    {
                                        display: flex;
                                        flex-direction: row;
                                        flex-wrap: wrap;
                                        align-items: center;
                                        justify-content: center;
                                        gap: 20px;
                                    }
                #CreateReviewFormContainerBar   {
                                                    width: clamp( 250px, 100%, 950px );
                                                    max-width: 950px;
                                                }
                    .CreateReviewFormLayoutBar  {
                                                    background-color: transparent;
                                                    margin-top: 16px;
                                                    display: flex;
                                                    flex-direction: row;
                                                    flex-wrap: wrap;
                                                    gap: 16px;
                                                }
                        .CreateReviewFormLayoutSubBar   {
                                                            width: clamp( 200px, 47%, 400px );
                                                            min-width: 200px; max-width: 400px;
                                                            background-color: transparent;
                                                            display: flex;
                                                            flex-direction: column;
                                                            gap: 8px;
                                                        }
                            .CreateReviewFormLayoutSubBar > p   {
                                                                    color: var(--text-dark-gray);
                                                                }
                            .CreateReviewFormLayoutSubBar > input   {
                                                                        background-color: transparent;
                                                                        padding: 8px 16px 8px 16px;
                                                                        border: solid 1px var(--border-gray);
                                                                        border-radius: 8px;
                                                                    }
                        .CreateReviewFormLayoutBar.UserDetailsBar   {
                                                                        margin-top: 36px;
                                                                    }
                        .CreateReviewFormLayoutBar.RateBar, .CreateReviewFormLayoutBar.ReviewMessageBar
                        {
                            flex-direction: column;
                            gap: 8px;
                        }
                            .CreateReviewFormLayoutBar.RateBar > p, .CreateReviewFormLayoutBar.ReviewMessageBar > p
                            {
                                color: var(--text-dark-gray);
                            }
                        .CreateReviewFormLayoutBar.RateBar  {}
                            #CreateReviewFormLayoutRateBar  {
                                                                background-color: transparent;
                                                                padding: 16px 16px 16px 16px;
                                                                border: solid 1px var(--border-gray);
                                                                border-radius: 8px;
                                                            }
                                #CreateReviewFormLayoutRateTitle    {
                                                                        color: var(--text-dark-gray);
                                                                        margin-bottom: 16px;
                                                                    }
                                #CreateReviewFormLayoutRateList {
                                                                    padding: 0;
                                                                    margin: 0;
                                                                    list-style-type: none;
                                                                    display: flex;
                                                                    flex-direction: row;
                                                                    flex-wrap: wrap;
                                                                }
                                    .CreateReviewFormLayoutRateListItem {
                                                                            width: clamp( 250px, 48%, 450px );
                                                                            min-width: 250px; max-width: 450px;
                                                                            padding: 8px 16px 8px 16px;
                                                                            margin-bottom: 8px;
                                                                            display: flex;
                                                                            flex-direction: row;
                                                                            flex-wrap: wrap;
                                                                            align-items: center;
                                                                            border: solid 0 transparent;
                                                                            border-radius: 8px;
                                                                        }
                                        .CreateReviewFormLayoutRateListItem img {
                                                                                    height: 26px; width: 26px;
                                                                                    margin-right: 8px;
                                                                                }
                                        .CreateReviewFormLayoutRateListItem p   {
                                                                                    color: black;
                                                                                }
                                    .CreateReviewFormLayoutRateListItem:hover   {
                                                                                    background-color: var(--cyan-blue);
                                                                                }
                                        .CreateReviewFormLayoutRateListItem:hover img   {
                                                                                            border: solid 0 transparent;
                                                                                            border-radius: 8px;
                                                                                        }
                                        .CreateReviewFormLayoutRateListItem:hover p  { color: white; }
                        .CreateReviewFormLayoutBar.ReviewMessageBar   {}
                            .CreateReviewFormLayoutBar.ReviewMessageBar > textarea  {
                                                                                        height: 80px;
                                                                                        background-color: transparent;
                                                                                        padding: 8px 16px 8px 16px;
                                                                                        border: solid 1px var(--border-gray);
                                                                                        border-radius: 8px;
                                                                                    }
                        .CreateReviewFormLayoutBar.SubmitBar    {
                                                                    background-color: transparent;
                                                                    justify-content: space-between;
                                                                }
                            .CreateReviewFormLayoutBar.SubmitBar > button  {
                                                                            font-weight: bold;
                                                                            color: white;
                                                                            background: linear-gradient( 45deg, #124FA2, #1D8EC8 );
                                                                            padding: 10px 16px 10px 16px;
                                                                            border: solid 0 transparent;
                                                                            border-radius: 8px;
                                                                            display: flex;
                                                                            flex-direction: row;
                                                                            align-items: center;
                                                                        }
                            .CreateReviewFormLayoutBar.SubmitBar > button:hover {
                                                                                    background: var(--cyan-blue);
                                                                                }
                            .CreateReviewFormLayoutBar.SubmitBar > button > img    {
                                                                                    height: 20px; width: 20px;
                                                                                    margin-left: 8px;
                                                                                }
                            .CreateReviewFormLayoutBar.SubmitBar > button:hover    {
                                                                                    background-color: var(--cyan-blue);
                                                                                }


    /* Message Board */
    #MessageBoard   {
                        height: 390px;
                        background: linear-gradient( to bottom ,white, var( --darker-background-gray ) );
                        padding: 26px 0 26px 0;
                        border-top: solid 2px var(--border-gray);
                        /* display: flex; */
                        position: fixed;
                        top: initial; bottom: 0;

                        animation: fadeOut 2s ease-out 8s forwards;
                    }
        #MessageBar {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                    }   
            #MessageHeaderBar   {
                                    width: 90%;
                                    flex-direction: column;
                                    justify-content: center;
                                }
                #MessageHeaderBar h1    {
                                            color: var(--text-dark-gray);
                                        }
                #MessageHeaderDescription   {
                                                text-align: center;
                                                color: var(--text-dark-gray);
                                                margin-top: 16px;
                                            }
            #MessageSubBar  {
                                width: clamp( 250px, 90%, 650px );
                                min-width: 250px; max-width: 750px;
                                color:var(--text-dark-gray);
                                padding: 46px 36px 46px 36px;
                                margin-top: 26px;
                                align-items: center;
                                box-shadow: 4px 4px 10px var(--text-gray);
                            }
            #MessageButton  {
                                width: clamp( 150px, 80%, 250px );
                                min-width: 150px; max-width: 250px;
                                font-size: 16px;
                                font-weight: bold;
                                margin-top: 36px;
                                padding: 8px 16px 8px 16px;
                                color: white;
                                background-color: var(--cyan-blue);
                                border: solid 2px transparent;
                                border-radius: 8px;
                            }
            #MessageButton:hover    {
                                        color: var(--text-dark-gray);
                                        background-color: transparent;
                                        border-color: var(--border-gray);
                                    }

    @keyframes fadeOut
    {
        from {
            opacity: 1;
        }
        to {
        opacity: 0;
        }
    }

@media screen and ( min-width:0px ) and ( max-width:479px )
{
    /* Header Board */
    .headerboard    { height: 70px; }
        .headerlogobar  { background-color: transparent; }
            .headerlogo {
                            height: 40px; width: 40px;
                            margin-top: 8px;
                        }
            .headerlogotext {
                                display: none;
                            }
        .headerdescriptionbar { display: none; }
    /* Cover Board */
    .CoverBoard {
                    align-items: end;
                    justify-content: center;
                }
        .CoverSubBar    {
                            margin-left: 16px; margin-right: 16px;
                        }
            /* Cover Title Bar */
            .CoverTitleText {   font-size: 20px;  }
            /* Cover Description Bar */
            .CoverDescriptionText   {
                                        font-size: 16px;
                                    }
        #CoverVisiotrsBar   {
                                right: 16px; bottom: 16px;
                            }
    /* Dash Board */
    /* About Us Board */
    #AboutUsBoard   {
                        padding-top: 36px; padding-bottom: 36px;
                    }
    /* Services Board */
    #ServicesBoard  {
                        padding: 26px 16px 26px 16px;
                    }
        #ServicesBoard h1   { font-size: 26px; }
        #ServicesBoard h2   { font-size: 18px; } 
    /* Featured Board */
    /* Directors Board */

    /* Contact Board */
    .ContactBoard   {}
        /* Contact Action Bar */
        .ContactActionBar   {
                                padding: 26px 26px 26px 26px;
                            }
            .ContactActionSubBar    {
                                        padding: 16px 16px 26px 16px;
                                    }
                .ContactActionTitleText {
                                            font-size: 22px;
                                        }
        /* Contact Form Bar */
        .ContactFormBoard   {
                                padding: 16px 26px 16px 26px;
                            }

    /* Footer Board */
    #FooterBoard   {
                        padding: 16px 0 16px 0;
                     }
            #FooterHeaderTitleText  {
                                        font-size: 18px;
                                    }
            #FooterHeaderDescrtiptionText   {
                                                display: none;
                                            }

    /* Popup Boards */
            .PopupSubHorizontalBar  {
                                        flex-direction: column;
                                    }
                .PopupSubHorizontalBar  div {
                                                width: clamp( 150px, 100%, 500px );
                                            }
                #VissionsBar    {
                                    margin-top: 0;
                                }
}

@media screen and ( min-width:480px ) and ( max-width:749px )
{
    /* Header Board */
    .headerboard    { height: 100px; }
        .headerlogobar  { background-color: transparent; }
            .headerlogo {
                            height: 60px; width: 60px;
                            margin-top: 16px;
                        }
            .headerlogotext {
                                display: block;
                            }
        .headerdescriptionbar { display: none; }
    /* Cover Board */
    .CoverBoard {
                    align-items: end;
                    justify-content: top;
                }
        .CoverSubBar    {
                            margin-left: initial;
                            right: 16px;
                        }
            /* Cover Title Bar */
            .CoverTitleText {   font-size: 26px;  }
            /* Cover Description Bar */
        #CoverVisiotrsBar  {
                                right: 16px; bottom: 16px;
                            }
    /* About Us Board */
    #AboutUsBoard   {
                        padding-top: 46px; padding-bottom: 46px;
                    }
    
    /* Services Board */
    #ServicesBoard  {
                        padding: 46px 16px 46px 16px;
                    }
        #ServicesBoard h1   { font-size: 30px; }
        #ServicesBoard h2   { font-size: 20px; } 
    /* Featured Board */
    /* Directors Board */

    /* Contact Board */
    .ContactBoard   {}
        /* Contact Action Bar */
        .ContactActionBar   {
                                padding:46px 46px 46px 46px;
                            }
            .ContactActionSubBar    {
                                        padding: 26px 26px 36px 26px;
                                    }
                .ContactActionTitleText {
                                            font-size: 26px;
                                        }
        /* Contact Form Bar */
        .ContactFormBoard   {
                                padding: 26px 36px 16px 36px;
                            }

    /* Footer Board */
    #FooterBoard   {
                        padding: 16px 0 16px 0;
                     }
            #FooterHeaderTitleText  {
                                        font-size: 18px;
                                    }
            #FooterHeaderDescrtiptionText   {
                                                display: none;
                                            }

    /* Popup Boards */
            .PopupSubHorizontalBar  {
                                        flex-direction: row;
                                    }
                .PopupSubHorizontalBar  div {
                                                width: clamp( 150px, 47.5%, 500px );
                                            }
}