/*==========================================================================
Experience CSS
==========================================================================*/
.experience__area {
    position: relative;
    z-index: 1;
    background: var(--color-6);
    overflow: hidden;
    &-shape {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: -1;
    }
    &-image {
        position: relative;
        display: flex;
        gap: 30px;
        &-shape {
            position: absolute;
            left: 0;
            bottom: 0%;
        }
    }
    &-right {        
        margin-left: 95px;
        &-title {
            h2 {
                margin-bottom: 30px;
            }
        }
        .btn-two {
            background: var(--color-6);
            margin-top: 50px;      
            color: var(--text-heading-color);
            &:hover {
                color: var(--text-white);
            }
        }
    }
}
.skill__area {
    &-item {
        margin-bottom: 20px;
        &:last-child {
            margin: 0;
        }
        .text-two {
            font-weight: 700;
        }
        &-content {
            position: relative;
        }
        &-count {
            position: absolute;
            top: -35px;
            right: 0;
        }
        &-inner {
            width: 100%;
            height: 8px;
            position: relative;
            background: var(--border-color-2);
            margin-top: 10px;
            .skillbar-bar {
                height: 8px;
                position: absolute;
                width: 0;
                background: var(--primary-color-1);
                transition: all 3.5s ease-out 0s;
                clip-path: polygon(0 0, 100% 0%, 98% 100%, 0% 100%);
                top: 0;
                border-radius: 0;
            }
            .skillbar-title {
                height: 8px;
                background: var(--primary-color-1);
                span {
                    display: none;
                }
            }
            .skillbar-percent {
                display: none;
            }
        }
    }
}
@media (max-width: 1399px) {
    .experience__area {
        &-right {
            margin-left: 30px;
            &-title {   
                margin-bottom: 35px;             
                h2 {
                    margin-bottom: 23px;
                }
            }
            .btn-two {
                margin-top: 45px;            
            }
        }
    }    
}
@media (max-width: 1199px) {
    .experience__area {
        &-right {
            margin-left: 0;
        }
    }    
}