/*==========================================================================
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;
            }
        }
        &-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);
            }
        }
    }
}
/*==========================================================================
Icon Box CSS
==========================================================================*/
.icon__box-item {
    display: flex;
    align-items: center;
    transition: 0.5s;
    &-icon {
        margin-bottom: 20px;
        position: relative;
        display: inline-flex;
        border-radius: 50%;
        transition: 0.4s;
        width: 70px;
        height: 70px;
        align-items: center;
        justify-content: center;
        background: var(--color-6);
        i {
            color: var(--primary-color-1);
            font-size: 30px;
            transition: 0.4s;
            line-height: 0;
        }
        svg {
            max-width: 30px;
            height: auto;
            transition: 0.4s;
        }
        span {
            position: absolute;
            right: 0;
            top: 0;
            background: var(--primary-color-2);
            width: 35px;
            height: 35px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--text-white);
            font-family: var(--heading-font);
            font-weight: 700;
            font-size: 14px;
            border-radius: 50%;
            border: 4px solid var(--text-white);
        }
    }
    &-content {
        p,
        h4 {
            transition: 0.4s;
            a {
                transition: 0.4s;
                &:hover {
                    color: var(--primary-color-1);
                }            
            }
        }
        > a {
            font-weight: 700;
            color: var(--text-heading-color);
            font-family: var(--heading-font);
            transition: 0.4s;
            display: flex;
            align-items: center;
            gap: 10px;
            i {
                font-size: 13px;
            }
        }
    }
    &:hover {
        .icon__box-item-icon {
            background: var(--primary-color-1);
            i {
                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;
        }
    }    
}