body, html
    {
        background-color: RGB( 90, 90, 90 );
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
    }
body    {
            overflow-y: auto;
            overflow-x: hidden;

            scrollbar-width: y mandatory;
        }
body::-webkit-scrollbar {
                            width: 2px;
                            background-color: RGB( 90, 90, 90 );
                        }
body::-webkit-scrollbar-thumb   {
                                    background-color: RGB( 7, 217, 233 );
                                }
*   {
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }

a   {
        text-decoration: none;
    }

.headerBoard    {
                    height: 66px; width: 100%;
                    color: white;
                    background-color: RGB( 0, 0, 0, 0.7 );
                    padding: 0 36px;
                    position: fixed;
                    z-index: 2;
                }
    .headerBar  {
                    height: 100%;
                    background-color: transparent;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
    .headerTitleText  {
                    margin-left: 20px;
                    font-size: 22px;
                    font-weight: bold;
                            }   
    .headerDescriptionText  {
                                margin-right: 20px;
                                font-size: 20px;
                                cursor: pointer;
                            }

    .headerMenuIcon {
                            display: none;
                            width: 30px; height: 30px;
                            opacity: 0.8;
                    }
    .headerMenuIcon.active  {
                                border-radius: 8px;

                                animation: rotateMenuIcon 10s linear infinite;
                            }
    .headerList {
                    background-color: transparent;
                    list-style: none;
                    display: flex;

                    flex-direction: row;
                    align-items: center;

                    padding: 0;
                    margin: 0;

                    border: solid 0 transparent;
                    border-radius: 0;
                    position: static;
                }
    
    .headerList li a    {
                            font-weight: bold;
                            color: white;
                        }

    .headerList li  {
                            color: white;
                        font-size: 16px;
                        border-radius: 4px;
                        padding: 8px 16px; 
                        transition: background-color 0.3s, color 0.3s;
                    }
    .headerList li:nth-child(1):hover   {
                                            background-color: pink;
                                        }
    .headerList li:nth-child(2):hover   {
                                            background-color: lightblue;
                                        }
    .headerList li:nth-child(3):hover   {
                                            background-color: lightgreen;
                                        }
    .headerList li:nth-child(4):hover   {
                                            background-color: orange;
                                        }

.ScrollDirectionImg {
                        height:36px; width: 36px;

                        border: solid 0 transparent;
                        border-radius: 36px;

                        position: absolute;
                        bottom: 16px; left: 16px;

                        animation: bounceUpDown 3s infinite;
                    }

.CoverBoard, .ProfileBoard, .ServicesBoard, .ProjectBoard, .ContactBoard    {
                                                                                min-height: 400px; max-height: 1280px;
                                                                                height: clamp( 670px, 100%, 1250px );
                                                                                width: 100%;
                                                                                scroll-snap-align: start;
                                                                            }
.CoverBoard     {
                    background-image: url( "Amogelang_portfolio_gif.gif" );
                    background-position: center;
                    background-size: cover;
                }
    .CoverBar   {
                    height: 730px; width: 100%;
                    background-color: transparent;
                    position: relative;
                }
        .CoverTitle {
                        color: white;
                        font-size: 34px;
                        font-weight: bold;
                        position: absolute;
                        top: 12%; right: 6%;
                    }
        .CoverMainTitleText {
                                background: linear-gradient(to right, #3b82f6, #10b981);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                background-clip: text;
                                color: transparent;
                            }
        .CoverDescriptionBar    {
                                    color: white;
                                    font-size: 28px; font-weight: bold;
                                    position: absolute;
                                    top: 44%; right: 50%;
                                    transform: translate( 50%, -50% );
                                }
        .CoverDescriptionMainTitleText  {
                                            background: linear-gradient(to right, #3b82f6, #10b981);
                                            -webkit-background-clip: text;
                                            -webkit-text-fill-color: transparent;
                                            background-clip: text;
                                            color: transparent;
                                        }
        .CoverDescriptionSubBar {
                                    color: white;
                                    font-size: 18px;
                                    position: absolute;
                                    top: 50%; right: 43%;
                                    transform: translate( 63%, 0% );
                                }
        .CoverOptionsBar    {
                                height: fit-content; width: 40%;
                                background-color: transparent;
                                display: flex;
                                align-items: center;
                                position: absolute;
                                right: 40%; bottom: 4%;
                                transform: translate( 54%, 0% );
                                gap: 10px 16px;
                                flex-wrap: wrap;
                            }
            .CoverOptionsSubButton { 
                                        min-width: 170px;
                                        width: clamp(170px, 100%, 150px);

                                        font-weight: bold;
                                        text-align: center;

                                        background-color: white;

                                        padding: 10px 14px;

                                        border: solid 2px transparent;
                                        border-radius: 8px;

                                        position: relative;

                                        flex: 1 1 170px;
                                        box-sizing: border-box;
                                    }
            .CoverOptionsSubButton:hover    {
                                                box-shadow: 0 8px 25px RGB( 0,212,221,0.3 );
                                            }
            .ContactButton  {
                                color: white;
                                background: RGB( 7, 217, 233 );
                                background: linear-gradient( to right, RGB( 7,217,233 ), RGB(46,152,252) );
                            }
            .ProjectsButton {
                                color: RGB( 7, 217, 233 );
                                background-color: transparent;
                                border-color: RGB(46,152,252);
                            }
            .ProjectsButton:hover   {
                                        color: black;
                                        background-color: RGB(46,152,252);
                                    }

.ProfileBoard   {
                    height: 720px;
                    background-color: RGB( 21, 24, 30 );
                    border-top: solid 4px RGB( 60, 60, 60 );
                }
    .ProfileImageBar    {
                            height: 158px; width: 158px;
                            
                            margin-top: 100px; margin-left: 50px; margin-right: auto;
                            padding: 0;

                            border: solid 4px RGB( 34, 61, 102 );
                            border-radius: 150px;

                            float: left;
                        }
        .ProfileImageBar img {
                                height: 150px; width: 150px;

                                margin: 0;
                                padding: 0;

                                border: solid 0 transparent;
                                border-radius: 150px;

                                object-fit: cover;
                                object-position: center top;
                             }
    .ProfileTitleBar    {
                            height: 130px;
                            font-size: 30px; font-weight: bold;
                            text-align: center;
                            color: white;

                            margin-top: 120px; margin-left: 3.7%; margin-bottom: 16px;

                            display: flex;
                            align-items: center;

                            float: left;
                        }
        .ProfileMainTitleText   {
                                    background: linear-gradient(to right, #3b82f6, #10b981); 
                                    -webkit-background-clip: text;
                                    -webkit-text-fill-color: transparent;
                                    background-clip: text;
                                    color: transparent;

                                    margin-right: 16px;
                                }
    .ProfileAboutBar    {
                            height: 420px; width: 44%;
                            color: white;
                            background-color: transparent;
                            margin-left: 36px; margin-right: initial;

                            display: flex;
                            text-align: center;
                            justify-content: center;
                            flex-direction: column;

                            float: left;
                            clear: left;
                        }
        .ProfileAboutTitleBar   {
                                    font-size: 22px; font-weight: bold;
                                    background-color: transparent;
                                    text-align: center;
                                    margin-bottom: 12px;
                                }
            .ProfileAboutTitleSecondText    {
                                                background: linear-gradient(to right, #3b82f6, #10b981);
                                                -webkit-background-clip: text;
                                                -webkit-text-fill-color: transparent;
                                                background-clip: text;
                                                color: transparent;
                                            }
        .ProfileAboutDescriptionBar { color: RGB( 179, 179, 179 ); }
    
    .ProfileTechnicallityBar    {
                                    height: fit-content; width: 44%;
                                    height: 410px;
                                    background-color: transparent;

                                    margin-right: 22px;
                                    padding: 15px;

                                    display: flex;
                                    flex-wrap: wrap;

                                    gap: 16px;

                                    overflow-y: auto;
                                    overflow-x: hidden;

                                    float: right;
                                    clear: none;
                                }
    .ProfileTechnicallityBar::-webkit-scrollbar {
                                                    width: 2px;
                                                    background-color: RGB(31,36,45);
                                                }
    .ProfileTechnicallityBar::-webkit-scrollbar-thumb   {
                                                            background-color: RGB( 7, 217, 233 );
                                                        }
        .ProfileTechnicallitySubBar {
                                        height: 180px; 
                                        min-width: 250px;
                                        width: clamp ( 250px, 100%, 400px );

                                        background:  linear-gradient( 145deg, RGB(27,30,36) 25%, RGB(31,36,45) 85% );

                                        border: solid 0 transparent;
                                        border-radius: 8px;

                                        flex: 1 1 250px;

                                        padding: 10px;
                                        display: flex;
                                        flex-direction: column;
                                        gap: 10px;
                                    }
        .ProfileTechnicallitySubBar:hover   {
                                                box-shadow: 0 0 15px 3px rgba( 0, 102, 255, 0.6 );
                                            }
            .ProfileTechnicallitySubIconBar {
                                                height: 36px; width: 36px;
                                                background: linear-gradient(145deg, #3b82f6, #10b981);
                                                color: transparent;
                                                border: solid 0 transparent;
                                                border-radius: 8px;
                                            }
                .ProfileTechnicallitySubIconBar img {
                                                        height: 36px; width: 36px;
                                                        border: solid 0 transparent;
                                                        border-radius: 8px;
                                                    }
            .ProfileTechnicallitySubTitleBar    {
                                                    font-size: 18px; font-weight: bold;
                                                    color: white;

                                                    margin-top: 4px;
                                                }
            .ProfileTechnicallitySubTextBar {
                                                color: RGB( 179, 179, 179 );
                                                margin-top: 0px; margin-right: 8px; margin-left: 8px;
                                            }

.ServicesBoard  {
                    background-color: RGB( 21, 24, 30 );
                    padding-bottom: 100px;
                    border-top: solid 4px RGB( 60, 60, 60 );
                }
    .ServicesTitleBar   {
                            font-size: 36px; font-weight: bold;
                            text-align: center;
                            color: white;
                            margin-top: 90px;
                        }
        .ServicesTitleMainText  {
                                    background: linear-gradient(to right, #3b82f6, #10b981);
                                    -webkit-background-clip: text;
                                    -webkit-text-fill-color: transparent;
                                    background-clip: text;
                                    color: transparent;   
                                }
    .ServicesDescriptionBar {
                                text-align: center;
                                color: RGB( 179, 179, 179 );
                                background-color: transparent;

                                margin-top: 16px; margin-right: 26px; margin-left: 26px;
                            }
    .ServicesDetailsBar {
                            height: 427px;
                            background-color: transparent;

                            margin-top: 46px; margin-right: 20px; margin-left: 26px;
                            padding: 15px;

                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-wrap: wrap;

                            gap: 16px;

                            overflow-y: auto;
                            overflow-x: hidden;

                            overflow-y: auto;
                            overflow-x: hidden;
                        }
    .ServicesDetailsBar::-webkit-scrollbar  {
                                                width: 2px;
                                                background-color: RGB(31,36,45);
                                            }
    .ServicesDetailsBar::-webkit-scrollbar-thumb    {
                                                        background-color: RGB( 7,217,233 );
                                                    }
        .ServicesDetailsSubBar  {
                                    height: 190px; min-width: 200px;
                                    width: clamp( 200px, 100%, 400px );
                                    
                                    background:  linear-gradient( 145deg, RGB(27,30,36) 25%, RGB(31,36,45) 85% );

                                    border: solid 0 transparent;
                                    border-radius: 8px;
                                    flex: 0 0 auto;

                                    padding: 10px;
                                    display: flex;
                                    flex-direction: column;
                                    gap: 10px;
                                }
        .ServicesDetailsSubBar:hover    {
                                            box-shadow: 0 0 15px 3px rgba( 0, 102, 255, 0.6 );
                                        }
            .ServicesDetailsSubIconBar  {
                                            height: 36px; width: 36px;
                                            background-color: transparent;
                                            border: solid 0 transparent;
                                            border-radius: 8px;
                                        }
                .ServicesDetailsSubIconBar img  {
                                                    height: 46px; width: 46px;
                                                    border: solid 0 transparent;
                                                    object-fit: cover;
                                                }
            .ServicesDetailsSubTitleBar {
                                            font-size: 18px; font-weight: bold;
                                            color: white;
                                        }
            .ServicesDetailsSubTextBar  {
                                            color: RGB( 179, 179, 179 );
                                            margin-right: 16px; margin-left: 16px;
                                        }
            .ServicesDetailsSubListBar    {
                                                height: 36px;
                                                background-color: transparent;
                                                margin-top: 12px; margin-right: 6px; margin-left: 6px;

                                                display: flex;
                                                gap: 8px;

                                                overflow-y: hidden;
                                                overflow-x: auto;
                                            }
            .ServicesDetailsSubListBar::-webkit-scrollbar   {
                                                                height: 2px;
                                                                background-color: transparent;
                                                            }
            .ServicesDetailsSubListBar::-webkit-scrollbar-thumb     {
                                                                        background-color: RGB( 34, 61, 102 );
                                                                    }
                .ServicesDetailsSubListItemBar  {
                                                    height: fit-content; width: fit-content;
                                                    color: RGB( 179, 179, 179 );
                                                    background-color: transparent;
                                                    padding: 8px 6px;
                                                    border: solid 0 transparent;
                                                    border-radius: 8px;
                                                }

.ProjectBoard   {
                    background-color: RGB( 21, 24, 30 );
                    padding-bottom: 40px;
                    border-top: solid 4px RGB( 60, 60, 60 );
                }
    .ProjectTitleBar    {
                            font-size: 36px; font-weight: bold;
                            text-align: center;
                            color: white;
                            margin-top: 90px;
                        }
        .ProjectTitleMainText   {
                                    background: linear-gradient(to right, #3b82f6, #10b981);
                                    -webkit-background-clip: text;
                                    -webkit-text-fill-color: transparent;
                                    background-clip: text;
                                    color: transparent;  
                                }
    .ProjectDescriptionBar  {
                                text-align: center;
                                color: RGB( 179, 179, 179 );

                                margin-top: 16px; margin-right: 26px; margin-left: 26px;
                            }
    .ProjectDetailsBar  {
                            height: 490px;
                            background-color: transparent;

                            margin-top: 46px; margin-right: 20px; margin-left: 26px;
                            padding: 15px;

                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-wrap: wrap;

                            gap: 26px;

                            overflow-y: auto;
                            overflow-x: hidden;

                            overflow-y: auto;
                            overflow-x: hidden;
                        }
    .ProjectDetailsBar::-webkit-scrollbar   {
                                                width: 2px;
                                                background-color: RGB(31,36,45);
                                            }
    .ProjectDetailsBar::-webkit-scrollbar-thumb {
                                                    background-color: RGB( 34, 61, 102 );
                                                }
        .ProjectDetailsSubBar   {
                                    height: 420px; min-width: 270px; max-width: 550px;
                                    width: clamp( 270px, 100%, 300px );
                                    
                                    background:  linear-gradient( 145deg, RGB(27,30,36) 25%, RGB(31,36,45) 85% );

                                    border: solid 0 transparent;
                                    border-radius: 8px;
                                    flex: 1 1 350px;

                                    display: flex;
                                    flex-direction: column;
                                }
        .ProjectDetailsSubBar:hover {
                                        box-shadow: 0 0 15px 3px rgba( 0, 102, 255, 0.6 );
                                    }
            .ProjectDetailsSubCoverBar  {
                                            height: 300px; width: 100%;
                                            background-color: transparent;

                                            position: relative;
                                        }
                .ProjectDetailsSubCoverBar img  {
                                                    height:100%; width: 100%;
                                                    border: solid 0 transparent;
                                                    border-top-right-radius: 8px; border-top-left-radius: 8px;

                                                    position: absolute;
                                                    z-index: 1;
                                                }
                .ProjectDetailsSubCoverButton   {
                                                    font-weight: bold;
                                                    color: white;
                                                    background: linear-gradient( to right, RGB( 7,217,233 ), RGB(46,152,252) );
                                                    padding: 8px 16px;
                                                    border: solid 0 transparent;
                                                    border-radius: 8px;

                                                    position: absolute;
                                                    z-index: 2;
                                                    right: 16px; bottom: 16px;
                                                }
                .ProjectDetailsSubCoverButton.LinkButton    {
                                                                right: initial; left: 16px;
                                                            }
                .ProjectDetailsSubCoverButton:hover {
                                                        background:  linear-gradient( 145deg, RGB(27,30,36) 25%, RGB(31,36,45) 85% );
                                                        opacity: 1;
                                                    }
            .ProjectDetailsSubDetailsBar    {
                                                height: 50px;
                                                color: white;
                                                background-color: transparent;

                                                padding-right: 12px; padding-left: 12px;

                                                display: flex;
                                                flex-direction: row;
                                                align-items: center;

                                                gap: 26px;
                                            }
                .ProjectDetailsSubDetailsTitleText  {
                                                        font-size: 22px; font-weight: bold;
                                                        float: left;

                                                        background: linear-gradient(to right, #3b82f6, #10b981);
                                                        -webkit-background-clip: text;
                                                        -webkit-text-fill-color: transparent;
                                                        background-clip: text;
                                                        color: transparent;   
                                                    }
                .ProjectDetailsSubDetailsDateText   {
                                                        text-align: right;
                                                        margin-left: auto;
                                                    }
            .ProjectDetailsSubDescriptionBar    {
                                                    height: 70px;
                                                    color: RGB( 179, 179, 179 );
                                                    background-color: transparent;
                                                    padding: 0 26px;

                                                    display: flex;
                                                    align-items: center;
                                                    justify-content: center;
                                                }
    .ContactBoard   {
                        height: 980px;
                        background-color: RGB( 21, 24, 30 );
                        padding-bottom: 100px;
                        border-top: solid 4px RGB( 60, 60, 60 );
                    }
        .ContactTitleBar    {
                                font-size: 36px; font-weight: bold;
                                text-align: center;
                                color: white;
                                margin-top: 90px;
                            }
            .ContactTitleMainText   {
                                        background: linear-gradient(to right, #3b82f6, #10b981);
                                        -webkit-background-clip: text;
                                        -webkit-text-fill-color: transparent;
                                        background-clip: text;
                                        color: transparent;     
                                    }
        .ContactDescriptionBar  {
                                    text-align: center;
                                    color: RGB( 179, 179, 179 );

                                    margin-top: 16px; margin-right: 26px; margin-left: 26px;
                                }
        .ContactSubBar  {  
                            height: 710px;
                            background-color: transparent;

                            margin-top: 46px; margin-right: 20px; margin-left: 26px;
                            padding: 15px;

                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-wrap: wrap;

                            gap: 26px 16px;

                            overflow-y: auto;
                            overflow-x: hidden;

                            overflow-y: auto;
                            overflow-x: hidden;
                        }
        .ContactSubBar::-webkit-scrollbar  {
                                                width: 2px;
                                                background-color: RGB(31,36,45);
                                            }
        .ContactSubBar::-webkit-scrollbar-thumb     {
                                                        background-color: RGB( 7,217,233 );
                                                    }
            .ContactDetailsBar, .ContactMessageBar
                                {
                                    height: fit-content; 
                                    width: clamp ( 250px, 100%, 600px ); 
                                    min-width: 250px; max-width: 600px;

                                    gap: 20px;

                                    display: flex;
                                    flex-direction: column;
                                    align-content: start;
                                }
            .ContactDetailsBar  {

                                }
                .ContactDetialSubBar    {
                                            background:  linear-gradient( 145deg, RGB(27,30,36) 25%, RGB(31,36,45) 85% );
                                            border: solid 0 transparent;
                                            border-radius: 8px;

                                            display: flex;
                                            flex-direction: row;

                                            padding: 26px 16px;
                                            gap: 16px;
                                        }
                    .ContactDetialSubIconBar    {
                                                    height: 46px; width: 46px;
                                                    background: RGB( 7, 217, 233 );
                                                    background: linear-gradient( to right, RGB( 7,217,233 ), RGB(46,152,252) );
                                                    border: solid 0 transparent;
                                                    border-radius: 8px;
                                                }
                        .ContactDetialSubIconBar img    {
                                                            height: 46px; width: 46px;
                                                            border: solid 0 transparent;
                                                        }
                    .ContactDetialSubDetailsBar {
                                                    color: white;

                                                    display: flex;
                                                    flex-direction: column;

                                                    gap: 10px;
                                                }
                        .ContactDetialSubDetailsTitle   {
                                                            font-size: 20px;
                                                            font-weight: bold;
                                                        }
                        .ContactDetialSubDetailsText    {
                                                            font-weight: bold;
                                                            color: RGB( 7, 217, 233 );
                                                        }
                        .ContactDetialSubDetailsData    {
                                                            color: RGB( 179, 179, 179 );
                                                        }
                        .ContactDetialSubBar.FollowBar  {
                                                            display: flex;
                                                            flex-direction: column;

                                                            gap: 12px;
                                                        }
                            .ContactDetialSubBar.FollowBar .ContactDetialTitleText  {
                                                                                        font-size: 20px; font-weight: bold;
                                                                                        color: white;
                                                                                    }
                            .ContactDetialSubBar.FollowBar .ContactDetialText   {
                                                                                    color: RGB( 179, 179, 179 );
                                                                                }
                            .ContactDetialSubBar.FollowBar .ContactDetialFollowMediaBar {
                                                                                            margin-top: 12px;

                                                                                            display: flex;
                                                                                            flex-direction: row;
                                                                                            justify-content: center;
                                                                                            gap: 16px;
                                                                                        }
                                .ContactDetialFollowMediaIconBar    {
                                                                        height: 46px; width: 46px;
                                                                        border: solid 0 transparent;
                                                                        border-radius: 36px;
                                                                        background-color: RGB( 21, 24, 30 );
                                                                    }
                                .ContactDetialFollowMediaIconBar:hover  {
                                                                            background: linear-gradient( to right, RGB( 7,217,233 ), RGB(46,152,252) );
                                                                            box-shadow: 0 0 15px 3px rgba( 0, 102, 255, 0.6 );
                                                                        }
                                    .ContactDetialFollowMediaIcon   {
                                                                        height: 46px; width: 46px;
                                                                        border: solid 0 transparent;
                                                                        border-radius: 36px;
                                                                    }
            .ContactMessageBar  {
                                    background:  linear-gradient( 145deg, RGB(27,30,36) 25%, RGB(31,36,45) 85% );
                                    padding: 16px;
                                    border: solid 0 transparent;
                                    border-radius: 8px;
                                }
                .ContactMessageSubBar   {
                                            color: white;
                                            font-weight: bold;

                                            display: flex;
                                            flex-direction: column;
                                            justify-content: start;
                                        }
                .ContactMessageSubBar.TitleBar  {
                                                    font-size: 22px;
                                                    font-weight: bold;
                                                    color: white;

                                                    align-items: center;
                                                    flex-direction: row;
                                                }
                    .ContactMessageSubBar.TitleBar img  {
                                                            height: 46px; width: 46px;
                                                            margin-right: 10px;
                                                        }
                .ContactMessageSubBar.DescriptionBar    {
                                                            font-weight: normal;
                                                            color: RGB( 179, 179, 179 );
                                                        }
                .ContactMessageSubBar input, .ContactMessageSubBar textarea {
                                                                                text-align: center;
                                                                                color: white;
                                                                                background-color: RGB( 21, 24, 30 );
                                                                                padding: 16px;
                                                                                margin-top: 10px; margin-right: 8px; margin-left: 8px;
                                                                                border: solid 0 transparent;
                                                                                border-radius: 8px;
                                                                            }
                .ContactMessageSubBar textarea  {
                                                    height: 100px;
                                                }
            .ContactbuttonBar   {
                                    align-items: center;
                                }
                .ContactMessageSubBar button    {
                                                    height: fit-content; min-width: 200px; max-width: 400px;
                                                    width: clamp ( 200px, 100%, 400px );
                                                    color: black;
                                                    font-weight: bold;
                                                    background: RGB( 7, 217, 233 );
                                                    background: linear-gradient( to right, RGB( 7,217,233 ), RGB(46,152,252) );
                                                    padding: 10px 14px;
                                                    border: solid 0 transparent;
                                                    border-radius: 8px;
                                                    flex: 1 200px 1;
                                                }
                .ContactMessageSubBar button:hover  {
                                                        box-shadow: 0 8px 25px RGB( 0,212,221,0.3 );
                                                    }
            .ContactMessageSubBar.AvailabilityBar   {
                                                        background-color: RGB( 21, 24, 30 );
                                                        padding: 16px; 
                                                        margin-top: 26px;
                                                        border: solid 0 transparent;
                                                        border-radius: 8px;
                                                    }
            .ContactMessageSubBar.AvailabilityBar .AvailabilityText {
                                                                        text-align: center;
                                                                        font-weight: normal;
                                                                        color: RGB( 179, 179, 179 );
                                                                        margin-top: 16px; margin-right: 16px; margin-left: 16px;
                                                                    }
    .ProjectViewBoard  {
                            width: 100%; height: 100%;

                            background-color: RGB( 0, 0, 0, 0.7 );


                            padding-top: 36px; padding-bottom: 36px;

                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-direction: column;
                            row-gap: 16px;

                            position: fixed;
                            z-index: 3;

                            top: 0; left: 0;

                            overflow-x: hidden;
                            overflow-y: auto;
                        }
    .ProjectViewBoard::-webkit-scrollbar    {
                                                width: 4px;
                                                background-color: RGB( 21, 24, 30 );
                                            }
    .ProjectViewBoard::-webkit-scrollbar-thumb  {
                                                    background-color: RGB( 34, 61, 102 );
                                                }
        .ProjectViewBar {
                            min-height: 600px; max-height: 750px;
                            min-width: 200px; max-width: 850px;
                            height: clamp(600px,97%,750px);
                            width: clamp(200px,98%,850px);
                            background-color: RGB( 21, 24, 30 );

                            border: solid 0 transparent;
                            border-radius: 8px;
                        }
            .ProjectViewIndicatorBar    {
                                            height: 36px;
                                            background-color: transparent;

                                            padding: 0px 8px 0px 16px;

                                            display: flex;
                                            align-items: center;
                                            justify-content: space-between;
                                            flex-direction: row;
                                        }
                .ProjectViewIndicatorTitleText  {
                                                    font-size: 18px; font-weight: bold;
                                                    color: white;
                                                    left: 26px;
                                                }
                .ProjectViewIndicatorSpanBar    {
                                                    display: flex;
                                                    align-items: center;
                                                    justify-content: center;
                                                    flex-direction: row;

                                                    gap: 8px;
                                                }
                    .ProjectViewIndicatorSpan   {
                                                    height: 10px; width: 10px;
                                                    border-radius: 50%;
                                                    background-color: white;
                                                    cursor: pointer;
                                                    opacity: 0.4;
                                                }
                    .ProjectViewIndicatorSpan.active, .ProjectViewIndicatorSpan:hover    {
                                                            transform: scale( 1.6 );
                                                            opacity: 0.8;
                                                        }
                .ProjectViewIndicatorCloseIcon  {
                                                    height: 24px; width: 24px;
                                                    border: solid 0px transparent;
                                                    border-radius: 24px;
                                                    opacity: 0.4;
                                                }
                .ProjectViewIndicatorCloseIcon:hover    {
                                                            opacity: 0.8;
                                                        }
            .ProjectViewMainBar {
                                    min-height:300px; max-height: 664px;
                                    height: clamp( 300px, 94%, 664px );
                                    background-color: transparent;
                                    display: flex;
                                    flex-direction: row;
                                    transition: transform 0.6s cubic-bezier ( 0.4, 0.0, 0.2, 1 );
                                    will-change: transform;
                                    gap: 16px;
                                    scroll-snap-type: x mandatory;
                                    overflow-x: auto;
                                    overflow-y: hidden;
                                }
            .ProjectViewMainBar::-webkit-scrollbar  {
                                                        height: 0;
                                                    }
                .ProjectViewSubBar  {
                                        height: 100%;
                                        width: 100%;
                                        padding-bottom: 16px;
                                        border: solid 0 transparent;
                                        border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;
                                        position: relative;
                                        flex: 0 0 100%;
                                        scroll-snap-align: start;

                                        overflow-y: auto;
                                        overflow-x: hidden;
                                    }
                .ProjectViewSubBar::before  {
                                                content: '';
                                                position: absolute;
                                                top: 0; left: 0; right: 0; bottom: 0;
                                                opacity: 0;
                                                transition: opacity 0.3s ease;
                                            }
                .ProjectViewSubBar:hover::before    {
                                                        opacity: 1;
                                                    }
                .ProjectViewSubBar::-webkit-scrollbar   {
                                                                        width: 2px;
                                                                        background-color: RGB( 60, 60, 60 );
                                                                    }
                .ProjectViewSubBar::-webkit-scrollbar-thumb {
                                                                            background-color: RGB(46,152,252);
                                                                            border-radius: 8px;
                                                                        }
                .ProjectViewSubBar > div, .ProjectViewSubBar > img {
                                                opacity: 0;
                                                transform: translateY(20px);
                                                transition: all 0.8s ease;
                                            }
                .ProjectViewSubBar.active > div, .ProjectViewSubBar.active > img {
                                                    opacity: 1;
                                                    transform: translateY(0);
                                                }
                /* Details Bar */
                .ProjectViewSubBar.DetailsBar   {
                                                    background-color: transparent;
                                                    margin-left: 0;
                                                }
                    .ProjectViewDetailsCoverImg {
                                                    height: 350px; width: 100%;
                                                    border: solid 0 transparent;
                                                    object-fit: cover;

                                                    border: solid 0 transparent;
                                                    display: block;
                                                    transform: translateZ(0);
                                                    backface-visibility: hidden;
                                                }
                    .ProjectViewDetailsTitleBar {
                                                    margin: 9px 12px;

                                                    display: flex;
                                                    flex-direction: row;
                                                    justify-content: space-between;
                                                }
                        .ProjectViewDetailsTitleText   {
                                                                font-size: 26px; font-weight: bold;
                                                                background: linear-gradient(to right, #3b82f6, #10b981);
                                                                -webkit-background-clip: text;
                                                                -webkit-text-fill-color: transparent;
                                                                background-clip: text;
                                                                color: transparent;

                                                                margin-right: 16px;
                                                            }
                        .ProjectViewDetailsTitleDateText    {
                                                                font-size: 16px;
                                                                color: white;
                                                            }
                    .ProjectViewDetailsDescriptionBar   {
                                                            height: fit-content;
                                                            background-color: transparent;
                                                            text-align: center;
                                                            color: RGB( 179, 179, 179 );
                                                            padding: 10px 26px;
                                                            margin-top: 12px; margin-bottom: 12px;

                                                            display: flex;
                                                            align-items: center;
                                                            justify-content: center;
                                                        }
                    .ProjectViewDetailsOptionsBar   {
                                                        height: 35px;
                                                        background-color: transparent;
                                                        margin-top: 9px; margin-right: 16px;
                                                    }
                        .ProjectViewDetailsOptionsButton  {
                                                                height: 35px;
                                                                width: fit-content;
                                                                font-weight: bold;
                                                                color: white;
                                                                background: linear-gradient( to right, RGB( 7,217,233 ), RGB(46,152,252) );
                                                                padding: 8px 16px;
                                                                margin-right: 16px;
                                                                border: solid 0 transparent;
                                                                border-radius: 8px;
                                                                float: right;
                                                            }
                        .ProjectViewDetailsOptionsButton:hover  {
                                                                    background:  linear-gradient( 145deg, RGB(27,30,36) 25%, RGB(31,36,45) 85% );
                                                                    opacity: 1;
                                                                }
                        .ProjectViewDetailsOptionsButton.LikeButton
                        {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: center;
                            width: fit-content;
                            text-align: center;
                        }
                        .ProjectViewDetailsOptionsButton.LikeButton > p:first-child
                        {
                            margin-right: 6px;
                            line-height: 1;
                        }
                        .ProjectViewDetailsOptionsButton.LikeButton > p:last-child
                        {
                            margin-left: 6px;
                            line-height: 1;
                        }
                .ProjectViewSubBar.FeaturesBar  {
                                                    height: 97%;
                                                    background-color: RGB(31,36,45);
                                                }
                    .ProjectViewFeaturesSubBar  {
                                                    height: fit-content; width: 100%;
                                                    background-color: transparent;
                                                }
                        .ProjectViewFeaturesList     {
                                                            height: fit-content; width: 100%;
                                                            background-color: transparent;

                                                            padding: 26px;
                                                            margin-left: 26px;

                                                            display: flex;
                                                            align-items: center;
                                                            justify-content: center;
                                                            flex-direction: column;

                                                            gap: 26px 8px;

                                                            overflow-y: auto;
                                                            overflow-x: hidden;

                                                            list-style: decimal;
                                                        }
                            .ProjectViewFeaturesListItem    {
                                                                color: white;
                                                            }
                .ProjectViewSubBar.ImagesBar    {
                                                    height: 97%;
                                                    background-color: transparent;
                                                }
                    .ProjectViewImagesSubBar    {
                                                    height: 100%; width: 100%;
                                                    background-color: transparent;
                                                }
                        .ProjectViewImagesList  {
                                                    height: 100%; width: 100%;
                                                    background-color: transparent;

                                                    padding: 8px;

                                                    display: flex;
                                                    flex-wrap: wrap;
                                                    justify-content: center;

                                                    gap: 16px;

                                                    list-style: none;
                                                }
                            .ProjectViewImagesListItem  {
                                                            height: 300px;
                                                            width: 300px;
                                                            background-color: transparent;
                                                            border: solid 0 transparent;
                                                            border-radius: 8px;
                                                            overflow: hidden;
                                                        }
                                .ProjectViewImagesListItem img  {
                                                                    height: 100%; width: 100%;
                                                                    object-fit: cover;
                                                                    border: solid 0 transparent;
                                                                }
                .ProjectViewSubBar.CodeBar  {
                                                height: 97%;
                                                background-color: RGB( 34, 61, 102 );
                                            }
                    .ProjectViewCodeSubBar  {
                                                 width: 100%;
                                                background-color: transparent;
                                            }
                        .ProjectViewCodeList    {
                                                    list-style-type: none;

                                                    display: flex;
                                                    flex-direction: column;
                                                    gap: 36px 8px;
                                                }
                            .ProjectViewCodeListItem    {
                                                        }
                                .ProjectViewCodeListItemTitle   {
                                                                    font-size: 20px; font-weight: bold;
                                                                    color: white;
                                                                }
                                .ProjectViewCodeListItemTitleTextBar    {
                                                                            color: RGB( 179, 179, 179 );
                                                                            margin-top: 8px;
                                                                        }
        .ProjectViewButtonBar   {
                                    width: fit-content;
                                    margin-right: 26px; margin-left: auto;

                                    border: solid 0 transparent;
                                }
            .ProjectViewButtonBar button    {
                                                font-weight: bold;
                                                color: white;
                                                background-color: RGB( 7, 217, 233 );
                                                padding: 8px 16px;
                                                border: solid 4px RGB( 21, 24, 30 );
                                                border-radius: 8px;
                                            }
            .ProjectViewButtonBar button:hover  {
                                                    color: black;
                                                    box-shadow: 0 8px 25px RGB( 0,212,221,0.3 );
                                                }

    .ErrorBoard {
                    min-height: 150px; max-height: 600px;
                    height: clamp ( 150px, 70%, 600px);
                    min-width: 250px; max-width: 600px;
                    width: clamp(250px,80%,600px );

                    color: RGB( 179, 179, 179 );
                    background: RGB(27,30,36);

                    padding: 26px 16px 26px 36px;

                    border: solid 8px RGB( 34, 61, 102 );
                    border-radius: 26px;

                    position: fixed;
                    z-index: 4;
                    left: 50%; bottom: 28px;
                    transform: translateX(-50%);

                    opacity: 1;
                }
    .ErrorBoard-fadeOut {
                            animation: fadeOut 1s ease-out forwards;
                        }
        .ErrorTitleBar  {
                            font-size: 26px; font-weight: bold;
                            text-align: center;
                            color: white;
                            margin-bottom: 26px;
                        }
        .ErrorDetailsBar    {
                                height: 90%;

                                padding: 0;
                                margin: 0;

                                overflow-x: hidden;
                                overflow-y: auto;
                            }
        .ErrorDetailsBar::-webkit-scrollbar {
                                                width: 2px;
                                                background-color: RGB( 60, 60, 60 );
                                            }
        .ErrorDetailsBar::-webkit-scrollbar-thumb   {
                                                        background-color: RGB( 179, 179, 179 );
                                                    }
            .ErrorDetailsList   {
                                    padding: 0 26px;
                                    margin: 0;
                                }
                .ErrorDetailsListItem   {
                                            margin-bottom: 26px;
                                        }
            

@keyframes rotateMenuIcon
{
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes bounceUpDown
{
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

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

@media screen and (min-width: 400px) and (max-width: 700px)
{
.headerBoard { padding: 10px 0; }

    .headerList {
                    background-color: black;
                    display: none;

                    flex-direction: column;
                    align-items: center;

                    padding: 16px 26px;
                    margin: 0;

                    border: solid 0 transparent;
                    border-bottom-right-radius:  8px; border-bottom-left-radius: 8px;

                    position: absolute;
                    top: 66px; right: 0;
                }

        .headerMenuIcon {
                            height: 46px; width: 46px;
                            display: block;
                            margin-right: 20px;
                            border: solid  transparent;
                            border-radius: 46px;
                        }

        .headerList li {
                            width: 100%;
                            text-align: center;
                            margin: 5px 0;
                        }

        .headerList li a {
                            display: block;
                            width: 100%;
                            padding: 12px 0;
                        }

.CoverBoard {
                height: 630px;    
            }
    .CoverBar   {
                    height: 630px;
                }

.ServicesBoard {
                    height: 750px;
                }
    .ServicesDetailsBar     {
                                height: 430px;

                                margin-top: 26px; margin-right: 6px; margin-left: 6px;
                                padding: 6px;
                            }

.ProfileBoard   {
                    height: 1150px;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                }
    .ProfileImageBar    {
                            width: 158px;
                            margin-left: auto; margin-right: auto;

                            float: none;
                            clear: both;
                        }
    .ProfileTitleBar    {
                            height: fit-content; width: fit-content;
                            font-size: 22px;

                            margin-top: 26px; margin-left: auto; margin-right: auto; margin-bottom: 36px;

                            float: none;
                            clear: both;
                        }
        .ProfileMainTitleText   {
                                    margin-right: 12px;
                                }
    .ProfileAboutBar    {
                            height: fit-content;
                            width: initial;

                            margin-right: 26px; margin-bottom: 46px;

                            float: none;
                            clear: both;
                        }

    .ProfileTechnicallityBar    {
                                    width: 99%;

                                    margin-left: 0px; margin-right: 0px;
                                    padding: 6px;

                                    float: none;
                                }
    .ProjectBoard   {
                        height: 1130px;
                    }
        .ProjectDetailsBar  {
                                height: 860px;
                                margin-right: 6px; margin-left: 0px;
                                padding: 6px;
                            }

    .ContactBoard {}
        .ContactSubBar  {
                            margin-right: 6px; margin-left: 0px;
                            padding: 6px;
                        }

    .ErrorBoard {
                    width: clamp(250px,95%,600px );
                    bottom: 180px;
                }

}

@media screen and (max-width: 400px)
{
.headerBoard { padding: 10px 0; }

    .headerList {
                    background-color: black;
                    display: none;

                    flex-direction: column;
                    align-items: center;

                    padding: 16px 26px;
                    margin: 0;

                    border: solid 0 transparent;
                    border-bottom-right-radius:  8px; border-bottom-left-radius: 8px;

                    position: absolute;
                    top: 66px; right: 0;
                }

        .headerMenuIcon {
                            height: 46px; width: 46px;
                            display: block;
                            margin-right: 20px;
                            border: solid  transparent;
                            border-radius: 46px;
                        }

        .headerList li {
            width: 100%;
            text-align: center;
            margin: 5px 0;
                        }

        .headerList li a {
            display: block;
            width: 100%;
            padding: 12px 0;
                        }

.CoverBoard {
                height: 570px;    
            }
    .CoverBar   {
                    height: 570px;
                }

.ProfileBoard   {
                    height: 1280px;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                }
    .ProfileImageBar    {
                            width: 158px;
                            margin-left: auto; margin-right: auto;

                            float: none;
                            clear: both;
                        }
    .ProfileTitleBar    {
                            height: fit-content; width: fit-content;
                            font-size: 22px;

                            margin-top: 26px; margin-left: auto; margin-right: auto; margin-bottom: 36px;

                            float: none;
                            clear: both;
                        }
        .ProfileMainTitleText   {
                                    margin-right: 12px;
                                }
    .ProfileAboutBar    {
                            height: fit-content;
                            width: initial;

                            margin-right: 26px; margin-bottom: 46px;

                            float: none;
                            clear: both;
                        }

    .ProfileTechnicallityBar    {
                                    width: 99%;   

                                    margin-left: 0px; margin-right: 0px;
                                    padding: 6px;

                                    float: none;
                                }

.ServicesBoard {
                    height: 750px;
                }
    .ServicesDetailsBar     {
                                height: 430px;

                                margin-top: 26px; margin-right: 6px; margin-left: 6px;
                                padding: 6px;
                            }

.ProjectBoard   {
                    height: 1200px;
                }
    .ProjectDetailsBar  {
                            height: 860px;
                            margin-right: 6px; margin-left: 0px;
                            padding: 6px;

                            align-items: center;
                            justify-content: flex-start;
                        }
        .ProjectDetailsSubBar   {
                                    height: 80vw;
                                }

.ContactBoard {}
        .ContactSubBar  {
                            margin-right: 6px; margin-left: 0px;
                            padding: 6px;
                        }
            .ContactSubBar  {
                                align-items: start;
                                justify-content: start;
                            }

.ProjectViewBoard   {
                        justify-content: flex-start;
                        padding-top: 16px; padding-bottom: 16px;
                    }
    .ProjectViewBar {
                        height: 650px;
                    }
        .ProjectViewIndicatorBar {}
            .ProjectViewSubBar {}
                .ProjectViewDetailsOptionsBar   {
                                                    height: fit-content;
                                                    margin-right: 0px;
                                                    display: flex;
                                                    justify-content: center;
                                                    gap: 16px;
                                                    flex-wrap: wrap;
                                                }
                    .ProjectViewDetailsOptionsButton    {
                                                            min-width: 110px;
                                                            margin-right: 0px;
                                                        }
.ErrorBoard {
                 width: clamp(250px,98%,600px );
                bottom: 180px;
            }
}