/*******************************************************/
/***************** ## Activity Area *****************/
/*******************************************************/
.popular-activity-area
    border: 1px solid $border-color
    
.activity-item
    padding: 20px
    transition: 0.5s
    background: white
    margin-bottom: 30px
    border-radius: 10px
    border: 1px solid $border-color
    display: flex
    align-items: center
    +res-bl(xs)
        +gapLR(padding, 15px)
    .image
        flex: none
        margin-right: 25px
        +res-bl(xxl)
            margin-right: 15px
        img
            border-radius: 50%
            +res-bl(xxl)
                +size(65px)
    .content
        margin-right: 10px
        h5
            line-height: 1.2
            margin-bottom: 5px
            +res-bl(xxl)
                font-size: 20px
    .right-btn
        margin-left: auto
        .more
            color: white
            font-size: 14px
            display: inline-block
            +circle($secondary-color, 30px)
    &:hover
        border-color: $secondary-color
        box-shadow: 10px 4px 60px rgba(247, 146, 30, 0.3)
            
/* Tour Activity */
.tour-activities
    display: flex
    flex-wrap: wrap
    margin-right: -15px

.tour-activity-item
    display: flex
    background: white
    padding: 15px 25px
    border-radius: 12px
    align-items: center
    margin: 0 15px 15px 0
    border: 1px solid $border-color
    box-shadow: 10px 4px 60px rgba(197, 197, 197, 0.25)
    +res-bl(md)
        padding: 8px 15px
        margin: 0 5px 5px 0
    +res-bl(xs)
        padding: 5px 12px
    i
        font-size: 40px
        margin-right: 15px
        color: $primary-color
        +res-bl(xl)
            font-size: 25px
            margin-right: 10px
        +res-bl(ms)
            font-size: 18px
    b
        font-size: 22px
        font-weight: 500
        color: $heading-color
        +res-bl(lg)
            font-size: 18px
        +res-bl(ms)
            font-size: 16px