/*==========================================================================
Experience CSS
==========================================================================*/
.experience__area {
    position: relative;
    z-index: 1;
    background: #000;
    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;
            }
        }
        &-skill {
            margin-top: 30px;
            &-item {
                &-content {
                    position: relative;
                    .text-two {
                        font-weight: 700;
                    }
                }
                &-count {
                    position: absolute;
                    top: 0;
                    right: 0;
                    font-weight: 500;
                }
                &-bar {
                    height: 10px;
                    position: absolute;
                    width: 0;
                    top: 0;
                    left: 0;
                    background: var(--primary-color-1);
                    transition: all 3.5s ease-out 0s;
                    clip-path: polygon(0 0, 100% 0%, 98% 100%, 0% 100%);
                }
                &-inner {
                    width: 100%;
                    height: 10px;
                    position: relative;
                    background: var(--border-color-2);
                    clip-path: polygon(0 0, 100% 0%, 98% 100%, 0% 100%);
                    margin-top: 8px;
                }
            }
        } 
        .btn-two {
            background: var(--color-6);
            margin-top: 50px;      
            color: var(--text-heading-color);
            &:hover {
                color: var(--text-white);
            }
        }
    }
}
@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;
        }
    }    
}