@import "../../variables.scss";


.ContactUsBlock {
    .ContactUsCard {
        border: solid 2px rgba($black, 0.1);
        border-radius: $bdr-rds + 10;
        margin: $mrg + 80 auto;
        max-width: 1200px;
        background: $white;
        @media (max-width: $md) {
            margin: 0;
            display: block !important;
        }
        .ContactUsForm {
            border: solid 2px rgba($black, 0.1);
            border-radius: $bdr-rds + 10;
            padding: $pad + 25;
            margin-top: -60px;
            margin-bottom: -60px;
            background-color: $white;
            margin-left: $mrg + 18;
            width: 55%;
            flex: 0 0 55%;
            @media (max-width: $lg) {
                margin-left: $mrg + 10;
                padding: $pad + 10;
            }
            @media (max-width: $md) {
                margin-top: 0;
                margin-bottom: 0;
                width: 100%;
                margin-left: 0;
                padding: $pad + 5;
                border: none;
            }
            h2 {
                font-size: $font + 30;
                color: $grey3;
                font-weight: $font-weight-heavy;
                line-height: 1;
                @media (max-width: $lg) {
                    font-size: $font + 20;
                }
            }
            label {
                font-size: $font + 4;
                font-weight: $font-weight-bold;
                color: $black;
                margin-bottom: $mrg - 5;
            }
            .ContactInput {
                box-shadow: none;
                border-radius: $bdr-rds;
                height: 42px;
                line-height: 42px;
                border: solid 1px rgba($black, 0.08);
            }
            textarea.ContactInput {
                height: 120px;
                line-height: normal;
                padding: $pad + 2;
            }
            button {
                font-size: $font + 6;
                border-width: 4px !important;
                padding: $pad - 4 $pad + 8;
                border-radius: $bdr-rds;
                img {
                    width: 18px;
                    margin-left: $mrg;
                }
            }
            .ContactUsBtn {
                i {
                    margin-right: $mrg + 10;
                }
            }
        }
        .ContactUsInfo {
            padding: $pad + 15;
            @media (max-width: $lg) {
                padding: $pad + 10;
            }
            @media (max-width: $md) {
                padding: $pad + 5;
            }
            h3 {
                font-size: $font + 15;
                @media (max-width: $lg) {
                    font-size: $font + 10;
                }
                br {
                    @media (max-width: $xl) {
                        display: none;
                    }
                }
            }
            p {
                margin: 0;
                br {
                    @media (max-width: $lg) {
                        display: none;
                    }
                }
            }
            .ContactUsOffice {
                padding-top: $pad + 25;
                @media (max-width: $lg) {
                    padding-top: $pad + 15;
                }
                h4 {
                    font-size: $font + 15;
                    color: $blue;
                    @media (max-width: $lg) {
                        font-size: $font + 10;
                        margin-bottom: 0;
                    }
                }
                span {
                    display: block;
                    font-size: $font + 10;
                    @media (max-width: $lg) {
                        font-size: $font + 6;
                    }
                }
            }
        }
    }
}