/*======= Skill =======*/
.skill-section {
    padding-top: 330px;
    padding-bottom: 80px;
    background-color: #f4f9fa;
    background-position: center;
    background-size: cover;
    margin-top: -330px;
}

.skill-section-two {
    position: relative;
    z-index: 1;

    &::before {
        position: absolute;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 28%;
        content: "";
        background-image: url(../img/skills/03.jpg);
        background-size: cover;
        background-position: center;
        z-index: -1;

        @include respond-below(md) {
            width: 100%;
            height: 45%;
        }
    }
}

.skill-progress-bars {
    .skill-progress {
        margin-bottom: 35px;

        .title {
            font-size: 18px;
            font-weight: 700;
            font-family: $raj;
            margin-bottom: 25px;
            line-height: 1.2;
            text-transform: uppercase;
            position: relative;
            overflow: hidden;
        }

        .progress-counter {
            color: $primary-color;
            position: absolute;
            top: 105%;
            transform: translate(-40%, -50%);
            @include transition(0.3s);
        }

        .progressbar-wrap {
            width: 100%;
            height: 3px;
            background-color: #f4f9fa;
            position: relative;

            .progressbar {
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 0;
                height: 8px;
                background-color: $primary-color;
                transition: width 2s ease-in-out;
            }

            .progressbarV {
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 3px;
                height: 18px;
                background-color: $primary-color;
                transition: 2s ease-in-out;
            }
        }

    }

    &.white-bars {
        .skill-progress .progressbar-wrap {
            background-color: $white;
        }
    }
}


.skill-progress-box {
    box-shadow: 0px 8px 16px 0px rgba(7, 28, 31, 0.04);
    background-color: $white;
    padding: 80px 80px 50px;

    @include respond-below(lg) {
        padding: 60px 40px 30px;
    }

    @include respond-below(xs) {
        padding: 60px 30px 30px;
    }
}

.skills-bg-img {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;

    @include respond-below(md) {
        height: 550px;
    }
}

.skills-text {
    &.p-left {
        @include respond-above(md) {
            padding-left: 30px;
        }
    }

    &.p-right {
        @include respond-above(md) {
            padding-right: 30px;
        }
    }
}

.skills-img {
    @include respond-below(md) {
        margin-bottom: 50px;
    }
}