@import 'partials';
.contact{
    padding: 83px 0 70px;
    position: relative;
    overflow-x: hidden;
    @media ($sm-1199){
        padding: 60px 0;
    }
    @media ($sm-991){
        padding: 50px 0;
    }
    .title-wrp{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .sec-title-sub{
            margin-bottom: 15px;
        }
        .secondary-sec-title{
            color: $txtColor;
            margin-bottom: 10px;
            text-align: center;
        }
        .sub-txt{
            max-width: 636px;
            text-align: center;
            font-weight: 400;
            color: rgba(41, 43, 43, 0.45);
            text-align: center;
        }
    }

    .form-blk{
        margin-top: 97px;
        max-width: 680px;
        margin-left: auto;
        @media ($sm-1679){
            margin-top: 80px;
        }
        @media ($sm-1441){
            max-width: 650px;
            margin-top: 60px;
        }
        @media (max-width:1399px){
            max-width: 600px;
        }
        @media ($sm-1199){
            max-width: 480px;
            margin-top: 50px;
        }
        @media ($sm-991){
            max-width: 100%;
        }
        .form-group{
            margin-bottom: 68px;
            position: relative;
            @media ($sm-1679){
                margin-bottom: 40px;
            }
            @media ($sm-1199){
                margin-bottom: 30px;
            }
            &.phone{
                .parsley-errors-list{
                    bottom: -20px;
                }
                .input-group{
                    select.input-group-text{
                        option:checked{
                            background-color: #25B0F0;
                            color: #fff;
                            opacity: 1;
                        }
                    }
                    .input-group-text{
                        background-color: transparent;
                        border: 0px;
                        border-bottom: 1px solid #c1c1d1;
                        color: #807FA7;
                        font-size: 16px;
                        min-width: 80px;
                        padding-right: 10px;
                        background: url(../img/select-icon.svg) no-repeat right 5px bottom 25px;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        text-indent: 1px;
                        padding-bottom: 13px;
                        border-radius: 0px !important;
                        option:checked{
                            background-color: #25B0F0;
                            color: #fff;
                            opacity: 1;
                        }
                        &:focus-visible{
                                outline: none !important;
                                box-shadow: none !important;
                        }
                        @media ($sm-1679){
                            font-size: 14px;
                        }
                    }
                    .form-control{
                        padding-left: 20px;
                        padding-bottom: 14px;
                    }
                }
            }
        }
        .form-label{
            color: $txtColor;
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 28px;
            @media ($sm-1679){
                font-size: 16px;
                margin-bottom: 15px;
            }
            @media ($sm-1199){
                font-size: 14px;
                margin-bottom: 10px;
            }
        }
        .form-control{
            border: none;
            border-bottom: 1px solid #C4D1E1;
            padding-bottom: 16px;
            border-radius: 0px;
            padding-left: 0px;
            padding-right: 0px;
            box-shadow: none;
            outline: none;
            padding-top: 0px;
            &::-webkit-input-placeholder{
                color: #998E76;
            }
            &::placeholder{
                color: #998E76;
            }
        }
        .btn-submit{
            max-width: 219px;
            width: 100%;
            justify-content: space-between;
            display: flex;
            position: relative;
            padding-left: 35px;
            padding-right: 20px;
            height: 52px;
            margin-left: auto;
            border-color: #998E76;
            background-color: #998E76;
            transition: .3s;
            &:active,&:focus{
                background-color: #998E76;
            }
            &:hover{
                opacity: .8;
            }
            &::after{
                content: "";
                width: 17px;
                height: 17px;
                background: url(../img/rt-white-arrow.svg) no-repeat center;
                background-size: contain;
            }
            @media ($sm-991){
                margin: 0 auto;
            }
        
        }
    }

    .img-lft{
        position: absolute;
        bottom: 0px;
        width: 895px;
        @media (max-width:1750px){
            left: -100px;
        }
        @media ($sm-1679){
            // left: -170px;
            // width: 840px;
            left: -50px;
            width: 720px;
        }
        @media ($sm-1441){
            width: 720px;
            left: -60px;
        }
        @media (max-width:1366px){
            width: 730px;
            left: -140px;
        }
        @media ($sm-1199){
            left: -130px;
            width: 659px;
        }
        @media (max-width:1074px){
        left: -180px;
        }
        @media ($sm-991){
            display: none;
        }
        .contact-btn{
            width: 364px;
            height: 71px;
            font-size: 24px;
            color: #fff;
            background-color: #998E76;
            position: absolute;
            border-radius: 36px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            right: 114px;
            bottom: 37%;
            text-decoration: none;
            padding: 16px;
            transition: .3s;
            &:hover{
                background-color: #aaa08a;
            }
            @media ($sm-1679){
                font-size: 22px;
                width: 315px;
                height: 60px;
            }
            @media ($sm-1441){
                font-size: 20px;
                width: 285px;
            }
            @media ($sm-1199){
                font-size: 18px;
                width: 260px;
                height: 50px;
            }
            @media ($sm-991){
                font-size: 16px;
            }
            .icon{
                margin-right: 19px;
                max-height: 41px;
                @media ($sm-1679){
                    max-width: 35px;
                }
                @media ($sm-1199){
                    max-width: 29px;
                }
                img{
                    display: block;
                    max-width: 100%;
                }
            }
        }

        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            max-height: 690px;
        }
    }
}