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

.contact-s-section{
    .title{
        color: $tertiary;
    }
    .contact-form{
        margin-bottom: 30px;
        @media only screen and (min-width: 1024px) {
            padding-left: 22px;
            margin: 0;
        }
        @media only screen and (min-width: 1600px) {
            padding-left: 32px;
        }
        .form-btn{
            @media only screen and (min-width: 1600px) {
                padding-left: 64px;
                padding-right: 64px;
            }
        }
        .custom-row{
            @media only screen and (min-width: 640px) {
                display: flex;
                align-items: center;
                margin: 0 -16px;
            }
            .input-group{
                width: 100%;
                @media only screen and (min-width: 640px) {
                    margin-left: 16px;
                    margin-right: 16px;
                }
            }
        }
    }
    .card-group{
        background: $LightCream;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .input-group{
            margin-bottom: 25px;
            @media only screen and (min-width: 1441px){
                margin-bottom: 32px;
            }
            label{
                color: $btnText;
            }
        }
    }
    .site-iframe{
        height: 250px;
        @media only screen and (min-width: 640px) {
            height: 450px;
        }
        @media only screen and (min-width: 1024px) {
            height: 100%;
        }
    }
    .card-group{
        padding: 20px;
        @media only screen and (min-width: 1024px) {
            padding: 30px;
        }
        @media only screen and (min-width: 1200px) {
            padding: 40px;
        }
        @media only screen and (min-width: 1440px) {
            padding: 80px;
        }
        @media only screen and (min-width: 1600px) {
            padding: 100px;
        }
    }
}