.about-section {
    
    .about-image-block {
        position: relative;
        width: 44.375vw;
        height: 39.375vw;

        @include media-query(1199px) {
            width: 100%;
            height: auto;
            margin-left: auto;
            margin-right: auto;
        }

        @include media-query(820px) {
            width: 75%;
        }

        @include media-query(490px) {
            width: 100%;
        }

        .online-course {
            padding: clamp(8px, 0.625vw, 24px);
            border-radius: $br-8;
            border: 1px solid $white;
            background: rgba(0, 68, 57, 0.80);
            backdrop-filter: blur(2px);
            display: flex;
            align-items: center;
            justify-content: start;
            gap: $gap-12;
            border-radius: $br-8;
            position: absolute;
            top: clamp(160px, 13.594vw, 350px);
            left: 6.302vw;
            width: clamp(230px, 14.01vw, 320px);
            height: clamp(60px, 3.594vw, 120px);

            @include media-query(1199px) {
                left: 0;
            }
            @include media-query(490px) {
                display: none;
            }

            .icon-box {
                width: clamp(40px, 2.292vw, 60px);
                height: clamp(40px, 2.292vw, 60px);
                background: $accent-2;
                border-radius: 50%;
                display: grid;
                align-items: center;
                justify-content: center;

            }
        }
    }

    .about-content-block {

        .skills-bar-container {
            position: relative;
            list-style: none;
            padding: 0;

            li {
                position: relative;
                width: 100%;

                .progressbar-title {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    color: $dark-gray;
                    font-weight: 600;

                }

                .bar-container {
                    background: $lightest-gray;
                    position: relative;
                    width: 100%;
                    height: 8px;
                    margin-top: 5px;
                    display: block;
                    border-radius: $br-4;

                    .progressbar {
                        position: absolute;
                        width: 0%;
                        height: 100%;
                        border-radius: $br-4;
                        -webkit-animation-duration: 1s;
                        animation-duration: 1s;
                        -webkit-animation-timing-function: ease-out;
                        animation-timing-function: ease-out;
                        -webkit-animation-fill-mode: both;
                        animation-fill-mode: both;
                        &::after{
                            content: '';
                            position: absolute;
                            top: -6px;
                            right: 0;
                            width: clamp(16px, 1.042vw, 28px);
                            height: clamp(16px, 1.042vw, 28px);
                            border-radius: 50%;
                            background: $accent-1;
                            border: 1px solid $white;
                            @include media-query(1699px){
                                top: -5px;
                            }
                            @include media-query(1499px){
                                top: -4px;
                            }
                        }
                    }

                    #progress-css {
                        -webkit-animation-name: progress-css;
                        animation-name: progress-css;
                        -webkit-animation-delay: 0.7s*1;
                        animation-delay: 0.7s*1;
                    }
                    #progress-javascript {
                        -webkit-animation-name: progress-javascript;
                        animation-name: progress-javascript;
                        -webkit-animation-delay: 0.7s*2;
                        animation-delay: 0.7s*2;
                    }
                    #progress-angular {
                        -webkit-animation-name: progress-angular;
                        animation-name: progress-angular;
                        -webkit-animation-delay: 0.7s*3;
                        animation-delay: 0.7s*3;
                    }
                }

                // end bar-container
            }
        }

        .progressbar {
            background-color: $accent-1;
        }


        @-webkit-keyframes progress-css {
            0% {
                width: 0%;
            }

            100% {
                width: 90%;
            }
        }

        @-webkit-keyframes progress-javascript {
            0% {
                width: 0%;
            }

            100% {
                width: 70%;
            }
        }


        @-webkit-keyframes progress-angular {
            0% {
                width: 0%;
            }

            100% {
                width: 65%;
            }
        }


        @-moz-keyframes progress-css {
            0% {
                width: 0%;
            }

            100% {
                width: 90%;
            }
        }

        @-moz-keyframes progress-javascript {
            0% {
                width: 0%;
            }

            100% {
                width: 70%;
            }
        }

        @-moz-keyframes progress-angular {
            0% {
                width: 0%;
            }

            100% {
                width: 65%;
            }
        }

        @keyframes progress-css {
            0% {
                width: 0%;
            }

            100% {
                width: 90%;
            }
        }

        @keyframes progress-javascript {
            0% {
                width: 0%;
            }

            100% {
                width: 70%;
            }
        }

        @keyframes progress-angular {
            0% {
                width: 0%;
            }

            100% {
                width: 65%;
            }
        }
    }
}