@import '../../../../../style/variables.scss';

.contact-us-card{
    background: $primary;
    padding: 20px;
    @media only screen and (min-width: 640px) {
        padding: 30px;
    }
    @media only screen and (min-width: 1200px) {
        padding: 40px;
    }
    @media only screen and (min-width: 1440px) {
        padding: 60px;
    }
    .input-group{
        @media only screen and (min-width: 1440px) {
            margin-bottom: 30px;
        }
    }
    h3,label{
        color: $white;
    }
    h3{
        margin-bottom: 20px;
        @media only screen and (min-width: 1200px) {
            margin-bottom: 30px;
        }
    }
    input,textarea{
        color: $mainText;
        border: none;
        &::placeholder{
            color: $darkGrey;
        }
    }
    .error-msg{
        color: $white;
    }
    .form-btn{
        background: $primary;
        border-color: $white;
        @media only screen and (min-width: 1440px) {
            padding-left: 64px;
            padding-right: 64px;
        }
        &:hover{
            background: $tertiary;
            border-color: $tertiary;
        }
    }
    .custom-row{
        @media only screen and (min-width: 480px) {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        @media only screen and (min-width: 768px) {
            display: block;
        }
        @media only screen and (min-width: 1024px) {
            display: flex;
            gap: 30px;
        }
        .input-group{
            width: 100%;
        }
    }
}