@import "partials";
.contact-banner-sec{
    padding-top: 30px;
    .contact-banner{
        background-image: url('../img/contact-bg.png');
        background-size: cover;
        border-radius: 24px;
        padding: 50px;
        @media ($sm-1441) {
            padding: 50px 20px;
        }
        @media ($sm-579) {
            padding: 40px 15px;
        }
        .title-block{
            p{
                font-size: 16px;
                color: #fff;
                @media ($sm-1679) {
                    font-size: 14px;
                }
            }
        }
        .loc-cover{
            display: flex;
            justify-content: center;
            .loc-wrapper{
                display: flex;
                @media ($sm-1199) {
                    flex-wrap: wrap;
                    justify-content: center;
                }
                .loc-col{
                    background-color: #1F1F22;
                    border-radius: 8px;
                    padding: 15px;
                    margin: 5px 9px;
                    display: inline-flex;
                    align-items: center;
                    color: #fff;
                    font-size: 16px;
                    @media ($sm-1679) {
                        font-size: 14px;
                    }
                    @media ($sm-1441) {
                        font-size: 13px;
                    }
                    @media (max-width: 640px) {
                        width: 100%;
                    }
                    img{
                        margin-right: 10px;
                        @media ($sm-1679) {
                            max-width: 18px;
                        }
                    }
                    a{
                        color: #fff;
                        font-size: 16px;
                        display: inline-block;
                        text-decoration: none;
                        padding-right: 30px;
                        @media ($sm-1679) {
                            padding-right: 20px;
                            font-size: 14px;
                        }
                        @media ($sm-1441) {
                            padding-right: 15px;
                            font-size: 13px;
                        }
                    }
                }
            }
        }
    }
}

.contact-form-sec{
    padding: 150px 0;
    @media ($sm-1679) {
        padding: 100px 0;
    }
    @media ($sm-1481) {
        padding: 80px 30px;
    }
    @media ($sm-1199) {
        padding: 70px 30px;
    }
    @media ($sm-991) {
        padding: 50px 30px;
    }
    @media ($sm-579) {
        padding: 40px 20px;
    }


                  .form-control,.country-code {
                    background-color: transparent;
                    border: 1px solid #2E2E34;
                    color: #fff;
                    height: 62px;
                    display: flex;
                    padding-left: 18px;
                    align-items: center;
                    border-radius: 60px;
                    font-size: 16px;
                    font-family: $primary-font;
                        @media($sm-1679){
                    height: 52px;
                    font-size: 14px;
                }
                @media($sm-1441){
                    height: 42px;
                    font-size: 13px;
                }
                @media($sm-1199){
                    height: 38px;
                }
           
                    &:focus {
                        background-color: transparent;
                        color: #fff;
                        box-shadow: none;
                        border-color: #e88b25;
                        }
                    &::placeholder {
                        color: #404046;
                        }

                    }

                    .country-code.form-select {
                    appearance: none; /* Remove default arrow */
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    padding-right: 0px !important;
                    background-image: url('../img/Polygon.svg') !important;
                    background-repeat: no-repeat !important;
                    background-position: right 10px center !important;
                    background-size: 12px !important;
                    position: relative;
                    }
                     .country-code {
                        padding-left: 10px;
                        border-top-right-radius: 0px;
                        border-bottom-right-radius: 0px;
                        width: 85px;
                        background-color: #18181a !important;
                    }
                    .phone-number-input{
                border-bottom-left-radius: 0px;
                border-top-left-radius: 0px;
                padding-left: 10px;
                  } 

    .contact-form-wrapper{
        padding: 0 80px;
        display: flex;
        @media ($sm-1481) {
            padding: 0 40px;
        }
        @media (max-width:1024px) {
            flex-wrap: wrap;
        }
        @media ($sm-767) {
            padding: 0;
        }
        .form-left-block{
            padding-top: 25px;
            width: 45%;
            color: #fff;
            @media (max-width: 1024px) {
                width: 100%;
                margin-bottom: 15px;
                padding-top: 0;
            }
            h4{
                font-size: 24px;
                font-weight: 600;
                @media ($sm-1679) {
                    font-size: 22px;
                }
                @media ($sm-579) {
                    font-size: 20px;
                }
            }
            p{
                font-size: 16px;
                color: #797993;
                @media ($sm-1679) {
                    font-size: 14px;
                }
            }
            .img-block{
                margin-top: 80px;
                @media ($sm-1679) {
                    margin-top: 60px;
                }
                @media (max-width: 1024px) {
                    display: none;
                }
                img{
                    max-width: 100%;
                    @media ($sm-1679) {
                        max-height: 240px;
                    }
                    @media ($sm-1481) {
                        max-height: 210px;
                    }
                }
            }
        }
        .form-right-block{
            width: 55%;
            padding-left: 30px;
            @media ($sm-1679) {
                padding-left: 60px;
            }
            @media ($sm-1199) {
                padding-left: 30px;
            }
            @media (max-width: 1024px) {
                width: 100%;
                padding-left: 0;
            }
        }
        .form-col{
            position: relative;
            margin-bottom: 40px;
            @media ($sm-1481) {
                margin-bottom: 30px;
            }
            @media ($sm-579) {
                margin-bottom: 20px;
            }

            .parsley-custom-error-message, .parsley-required, .parsley-length, .parsley-equalto, .parsley-type {
                position: absolute;
                left: 0;
                width: 100%;
            }
            .form-alert{
                position: absolute;
                left: 25px;
                top: 100%;
                font-size: 13px;
                color: red;
            }
            .form-label{
                color: #fff;
                font-size: 16px;
                @media ($sm-1679) {
                    font-size: 14px;
                }
            }
            .custom-input-group{
                border: 1px solid #2E2E34;
                background-color: transparent;
                height: 62px;
                border-radius: 60px;
                position: relative;
                @media ($sm-1679) {
                    height: 54px;
                }
                @media ($sm-1481) {
                    height: 50px;
                }
                .input-group-text{
                    padding-left: 30px;
                    background-color: transparent;
                    border: none;
                    padding-right: 0px !important;
                }
                .form-control{
                    background-color: transparent;
                    border: none;
                    color: #fff;
                    box-shadow: none;
                }
            }
            .form-control{
                box-shadow: none;
                font-size: 16px;
                @media ($sm-1679) {
                    font-size: 14px;
                }
                &::placeholder, &::-webkit-input-placeholder{
                    color: #404046;
                }
            }
            .custom-form-control{
                color: #fff;
                border: 1px solid #2E2E34;
                background-color: transparent;
                height: 62px;
                border-radius: 60px;
                padding: 10px 30px;
                @media ($sm-1679) {
                    height: 54px;
                }
                @media ($sm-1481) {
                    height: 50px;
                }
            }
        }
        .btn-col{
            text-align: right;
            padding-top: 10px;
            .send-btn{
                border-radius: 60px;
                background-color: $primary;
                color: #fff;
                font-size: 16px;
                font-weight: 500;
                width: 220px;
                padding: 18px;
                border: solid 1px $primary;
                transition: .3s;
                @media ($sm-1679) {
                    width: 200px;
                    padding: 14px;
                    font-size: 14px;
                }
                @media ($sm-1481) {
                    width: 180px;
                    padding: 12px 15px;
                }
                @media ($sm-579) {
                    width: 100%;
                }
                &:hover{
                    background-color: transparent;
                    color: $primary;
                }
            }
        }
    }
}

.contact-deals-sec {
    background-color: #030304;
    background-image: url('../img/deals-bg.png');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 100%;
    padding: 0 80px;
    @media ($sm-767) {
        padding: 0 20px;
    }
    .custom-container{
        @media (min-width: 1441px) {
            max-width: 1200px;
        }
        @media (min-width: 1500px) {
            max-width: 1500px;
        }
      
    }
    .deals-wrapper{
         position: relative;
        overflow: hidden;
        display: flex;
        align-items: stretch;
        @media ($sm-767) {
            flex-wrap: wrap;
        }
    }
    .content-left {
        max-width: 780px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 50px 0;
        // margin-left: 180px;
        @media ($sm-1679) {
            max-width: 700px;
        }

        @media ($sm-1441) {
            max-width: 600px;
        }
        @media ($sm-1199) {
            max-width: 500px;
        }
        @media ($sm-991) {
            max-width: 400px;
        }

        @media ($sm-767) {
            max-width: 500px;
            text-align: center;
            width: 100%;
            margin: 0 auto;
            padding-bottom: 30px;
        }

        .title {
            text-align: left;
            @media ($sm-767) {
                text-align: center;
            }
        }

        .bnr-desc {
            color: $white;
            padding: 17px 0 33px;
            font-size: 18px;

            @media ($sm-1679) {
                font-size: 16px;
                padding: 15px 0 30px;
            }

            @media ($sm-1441) {
                font-size: 15px;
                padding: 15px 0 25px;
            }

            @media ($sm-1199) {
                font-size: 14px;
                padding: 15px 0 20px;
            }

            @media ($sm-991) {
                font-size: 13px;
                padding: 0px 0 20px;
            }
        }

        .sec-btn {
            font-weight: 500;
            font-size: 18px;

            @media ($sm-1679) {
                font-size: 16px;
            }

            @media ($sm-1441) {
                font-size: 15px;
            }

            @media ($sm-1199) {
                font-size: 14px;
            }

            @media ($sm-991) {
                font-size: 13px;
            }
            @media ($sm-767) {
                margin: 0 auto;
            }
            
            &:hover {
                &::after {
                    background-color: #151516;
                }
            }
        }
        .img{
            img{
            
                @media($sm-767){
                        width: 22px;
                }
            }
        }
    }

   
 
    .img-wrp-hold {
        flex: 1;
        padding-left: 15px;
        margin-left: auto;
        text-align: right;
        @media ($sm-767) {
            text-align: center;
        }
        img {
            max-width: 500px;
            max-height: 460px;
            @media ($sm-1679) {
                max-width: 500px;
                max-height: 400px;
            }

            @media ($sm-1441) {
                max-width: 400px;
                max-height: 360px;
            }

            @media ($sm-1199) {
                max-width: 350px;
                max-height: 300px;
            }

            @media ($sm-991) {
                max-width: 300px;
            }
            @media ($sm-767) {
                max-width: 200px;
                max-height: 260px;
            }
            @media ($sm-579) {
                max-width: 200px;
                max-height: 180px;
            }
        }
    }
}
.custom-form-control.contact-msg {
    height: 100px !important;
    border-radius: 10px !important;
}