/*******************************************************/
/******************** ## About Area ********************/
/*******************************************************/
.about-us-content
    max-width: 450px
    
.about-us-image
    z-index: 1
    padding: 5%
    margin: 30px
    max-width: 630px
    border-radius: 50%
    position: relative
    +flexcenter(center)
    border: 1px solid $border-color
    animation: circle_animation 30s linear infinite
    
    +res-ab(lg)
        margin-left: auto
    &:before
        content: ''
        +size(82%)
        +absmiddle()
        border-radius: 50%
        background: rgba($primary-rgb, 0.1)
    > img
        max-width: 88%
        animation: circle_animation_invers 30s linear infinite
    .shape
        position: absolute
        +circle(white, 65px)
        animation: zoomInOut 5s linear infinite
        box-shadow: 0px 10px 30px rgba(184, 184, 184, 0.25)
        +res-bl(ms)
            +size(45px)
            line-height: 45px
        img
            max-width: 50%
        &:nth-child(1)
            left: 22%
            top: -5px
        &:nth-child(2)
            left: 70%
            top: 1%
        &:nth-child(3)
            top: 43%
            right: -30px
        &:nth-child(4)
            right: 8%
            bottom: 8%
        &:nth-child(5)
            left: 38%
            bottom: -30px
        &:nth-child(6)
            left: 0
            bottom: 20%
        &:nth-child(7)
            top: 30%
            left: -25px
        &:nth-child(odd)
            animation-delay: 1s
            
/* About Two */
.experience-years
    +size(216px)
    display: flex
    padding: 35px
    border-radius: 50%
    flex-direction: column
    justify-content: center
    border: 1px solid $border-color
    .title
        color: white
        padding: 2px 15px
        position: absolute
        border-radius: 20px
        background: $primary-color
        transform: rotate(25deg) translate(40px, -60px)
        &.bgc-secondary
            background: $secondary-color
    .text
        font-weight: 500
        color: $heading-color
    .years
        line-height: 1
        font-size: 80px
        font-weight: 600
        color: $heading-color
        
/* About Page */
.about-page-content
    .list-style-two
        display: flex
        flex-wrap: wrap
        justify-content: space-between
        li
            width: 48%
            +res-bl(ms)
                width: 100%
                
.about-feature-image
    margin-bottom: 30px
    img
        width: 100%
        border-radius: 10px
                
.about-feature-boxes
    .feature-item.style-three
        padding-top: 40px
        margin-bottom: 30px
        padding-bottom: 20px
        
/* FAQ Page About */
.faq-page-about-content
    max-width: 525px
    .section-title h2
        +res-bt(lg, xl)
            font-size: 40px
    .list-style-two
        display: flex
        flex-wrap: wrap
        justify-content: space-between
        li
            width: 48%
            +res-bl(ms)
                width: 100%