/*******************************************************/
/****************** 20. Contact Area *******************/
/*******************************************************/
.contact-info-wrap
    padding: 40px
    border: 1px solid rgba(255, 255, 255, 0.1)
    +res-bl(ms)
        +gapLR(padding, 25px)
    
.contact-info-item
    display: flex
    &:not(:last-child)
        margin-bottom: 30px
    .icon
        flex: none
        color: white
        font-size: 20px
        margin-top: 5px
        margin-right: 20px
        +circle($orange-color, 55px)
        +res-bl(xs)
            +size(45px)
            font-size: 16px
            line-height: 45px
            margin-right: 15px
    .title
        font-size: 18px
    .text
        display: block
        font-weight: 400
        +res-ab(xs)
            font-size: 22px
    &.style-two
        padding: 35px 40px
        background: #f0f6ff
        +res-bl(ms)
            +gapLR(padding, 25px)
        +res-bl(xs)
            display: block
        .icon
            margin-bottom: 10px
            background: $primary-color
            +res-ab(ms)
                +size(60px)
                font-size: 24px
                line-height: 60px
                margin-right: 25px
        .content
            color: $heading-color
            .title
                font-size: 14px
                font-weight: 500
                margin-bottom: 3px
                text-transform: uppercase
            .text
                +res-ab(xs)
                    font-size: 20px
                    line-height: 1.4
                a
                    &:not(:hover)
                        color: $heading-color
        &:nth-child(2)
            background: #fef9ed
            .icon
                background: $yellow-color
        &:nth-child(3)
            background: #effafe
            .icon
                background: $secondary-color
        
.contact-area-form
    background: white
    border-radius: 12px
    padding: 40px 60px 50px
    +res-bl(ms)
        +gapLR(padding, 25px)
    h4
        margin-bottom: 25px
    .form-control
        font-size: 18px
        margin-bottom: 15px
        &::placeholder
            font-weight: 600
            color: $heading-color
    .theme-btn
        min-width: 70%
        
.contact-shapes
    .shape
        z-index: -1
        position: absolute
    .circle
        top: 10%
        right: 10%
        max-width: 10%
        animation: rotated_circle 40s infinite
    .dots
        left: 15%
        bottom: 5%
        max-width: 10%
        animation: down-up-two 30s infinite
    .wave-line
        max-width: 30%
        right: 0
        bottom: 0
        animation: down-up-one 10s infinite
        
/* Contact Page */
.contact-content
    .form-group
        margin-bottom: 22px
        label
            font-size: 18px
            font-weight: 400
            margin-bottom: 10px
            color: $heading-color
            font-family: $heading-font
        .form-control
            +gapTB(padding, 17px)
        .nice-select
            font-size: 16px
            line-height: 1.75
            .current
                font-weight: 400
                color: $base-color
                
.has-error
    .help-block.with-errors
        margin-top: 5px
        color: $orange-color
#msgSubmit
    &.h4
        font-size: 20px
        margin-bottom: 0
        margin-top: 10px
                
.follow-us
    padding-top: 22px
    text-align: center
    padding-bottom: 35px
    border: 1px solid $border-color
    h4
        font-size: 22px
        margin-bottom: 22px
        padding-bottom: 20px
        border-bottom: 1px solid $border-color
        
/* Our Location */
.our-location-address-area
    margin-top: -250px
    transform: translateY(250px)
    .container
        +res-ab(xl)
            max-width: 1140px
.location-address-item
    background: white
    border-radius: 7px
    margin-bottom: 30px
    box-shadow: 10px 0 60px rgba(64, 64, 64, 0.1)
    .top-part
        padding-top: 40px
        text-align: center
        +gapLR(margin, 25px)
        padding-bottom: 10px
        border-bottom: 1px solid $border-color
        h5
            font-size: 20px
            margin-top: 35px
    .bottom-part
        padding: 25px 45px 35px
        +res-bl(xs)
            +gapLR(padding, 35px)
        li
            &:not(:last-child)
                margin-bottom: 10px
            i
                font-size: 18px
                margin-right: 10px
                color: $primary-color
        
/* Google Map */
.our-location
    margin-bottom: -15px
    iframe
        height: 750px