// Contact Page Style

.contact-area{
    .contact-map {
        margin-bottom: 60px;
        #map {
            height: 560px;
        }
    }
    .custom-row-2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -5px;
        margin-left: -5px;
        div[class^="col-"] {
            padding-left: 5px;
            padding-right: 5px;
        }
        .contact-info-wrap {
            background-color: #f3f3f3;
            padding: 120px 70px 112px 90px;
            .single-contact-info {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                margin-bottom: 40px;
                .contact-icon {
                    margin-right: 20px;
                    i {
                        font-size: 20px;
                        color: #1d1d1d;
                        display: inline-block;
                        width: 40px;
                        height: 40px;
                        line-height: 40px;
                        border: 1px solid #252525;
                        text-align: center;
                        border-radius: 100%;
                        -webkit-transition: all .3s ease 0s;
                        -o-transition: all .3s ease 0s;
                        transition: all .3s ease 0s;
                    }
                }
                &:hover{
                    .contact-icon {
                        i {
                            background-color: $theme-color;
                            color: #fff;
                            border-color: $theme-color;
                        } 
                    }
                }
                .contact-info-dec{
                    p {
                        line-height: 1;
                        color: #1d1d1d;
                        margin: 0 0 9px;
                        & a{
                            color: #1d1d1d;
                            &:hover{
                                color: $theme-color;
                            }
                        }
                    }
                }
            }
            .contact-social{
                h3 {
                    font-weight: 700;
                    color: #1d1d1d;
                    font-size: 24px;
                    margin: 0 0 17px;
                    line-height: 1;
                }
                .social-info {
                    margin-top: 30px;
                    a {
                        position: relative;
                        display: inline-block;
                        vertical-align: middle;
                        color: #666;
                        font-size: 24px;
                        padding: 0;
                        line-height: 36px;
                        border-radius: 100%;
                        text-align: center;
                        border: none;
                        z-index: 1;
                        -webkit-transition: all 300ms linear;
                        -moz-transition: all 300ms linear;
                        -ms-transition: all 300ms linear;
                        -o-transition: all 300ms linear;
                        transition: all 300ms linear;
                        margin-right: 15px;
                        &:hover{
                            color: $theme-color;
                        }
                    }
                }
            }
            @media #{$desktop-device}{
                padding: 120px 20px 112px 40px;
            }
            @media #{$tablet-device}{
                padding: 120px 20px 112px 30px;
            }
            @media #{$large-mobile}{
                padding:50px 30px 50px 30px;
            }
        }
        .contact-form {
            background-color: #f3f3f3;
            padding: 50px 110px 50px 110px;
            .contact-title {
                h2 {
                    font-size: 24px;
                    font-weight: 700;
                    color: #1d1d1d;
                    line-height: 1;
                    margin-bottom: 36px;
                    margin-left: -10px;
                }
            }
            .contact-form-style{
                input, textarea{
                    background: transparent;
                    border: 1px solid #c1c1c1;
                    height: 40px;
                    padding: 2px 14px;
                    margin-bottom: 30px;
                    color: #000;
                    width: 100%;
                    outline: none;
                    border-radius: 5px;
                }
                textarea {
                    padding: 20px 14px;
                    margin-bottom: 0;
                    height: 200px;
                    @media #{$tablet-device}{
                        height:130px;
                    }
                }
                button {
                    border: none;
                    background-color: $theme-color;
                    color: #fff;
                    font-size: 14px;
                    font-weight: 700;
                    text-transform: uppercase;
                    line-height: 1;
                    padding: 15px 52px;
                    margin-top: 33px;
                    outline: none;
                    -webkit-transition: all .3s ease 0s;
                    -o-transition: all .3s ease 0s;
                    transition: all .3s ease 0s;
                    border-radius: 5px;
                    &:hover{
                        background:#1d1d1d;
                    }
                }
            }
            p {
                color: #333;
            }
            @media #{$tablet-device}{
                padding: 50px 30px 50px 30px;
            }
            @media #{$large-mobile}{
                padding:50px 30px 50px 30px;
            }
        }
    }
}