@import 'partials';
.title-sec{
    padding-left: 0px;
    padding-right: 0px;
}
.contact-us-bnr{
    &.sub-bnr{
        background-image: url(../img/contact-us-banner.png);
        background-repeat: no-repeat;
        background-size: cover;
        height: 656px;
        @media ($sm-1679){
            height: 640px;
        }
        @media ($sm-1441){
            height: 580px;
        }
        @media ($sm-1199){
            height: 450px;
        }
        @media ($sm-991){
            height: 350px;
        }
    }
}
.contact-form{
    padding: 100px 0px;
    @media($sm-1679){
        padding: 80px 0px;
    }
    @media($sm-1481){
        padding: 60px 0px;
    }
    @media($sm-767){
        padding: 40px 12px;
    }
    .custom-container{
        @media (min-width: 1600px){
            max-width: 1348px;
        width: 100%;
        margin: 0 auto;
        counter-reset: section-counter;
        margin-top: 49px;
        }
        @media (min-width:1441){
            max-width: 1300px;
        }
        @media (min-width:767){
            max-width: 100%;
            padding: 0px 20px;
         
        }
    }

    .subtitle{
        color: #014CB2;
    }
    label{

        font-size: 20px;
        font-weight: 400;
        line-height: 20.4px;
        letter-spacing: -0.01em;
        color: #203063;
        padding-bottom: 10px;
        @media($sm-1679){
            font-size: 18px;
        }
        @media($sm-1441){
            font-size: 16px;
        }
        @media($sm-1281){
            font-size: 14px;
            padding-bottom: 5px;
        }

    }
    .form-control{
        height: 62px;
        border: 1px solid #BCC5D3;
        border-radius: 14px;
        font-size: 18px;
        font-weight: 400;
        line-height: 24.48px;
        @media($sm-1679){
            font-size: 16px;
            height: 52px;
        }
        @media($sm-1441){
            font-size: 14px;
            height: 42px;
        }
 

        &.text-area{
            height: 250px;
            @media($sm-1679){
                height: 220px;
            }
            @media($sm-1441){
                height: 200px;
            }
            @media($sm-1199){
                height: 180px;
            }
        }
        &::placeholder{
            color: #A2A8BD;
        }
    }
.form-sec{
    justify-content: space-between;
    padding-top: 50px;
    @media($sm-767){
        padding-top: 0px;
        
    }
    .btn-sec{
        justify-content: end;
        display: flex;
        .primary-btn{
            background: #014CB2;
            color: #fff;
            img{
                filter: brightness(0) saturate(100%) invert(100%) sepia(25%) saturate(65%) hue-rotate(37deg) brightness(107%) contrast(101%);
            }
        }
    }
    .form-wrapper{
        max-width: 680px;
        // @media($sm-1679){
        //     max-width: 630px;
        // }
        // @media($sm-1481){
        //     max-width:47%;
        //     width: 47%;
        // }
        @media(max-width:1399px){
            width: 48%;
        }
        @media($sm-1199){
            width: 48%;
        }
        @media($sm-767){
            width: 100%;
            max-width: 100%;
            padding: 0;
        }
      
    }
    .form-inner{
        margin-bottom: 30px;
        @media($sm-1679){
            margin-bottom: 20px;
        }
        @media($sm-1441){
            margin-bottom: 15px;
        }
    }
    .images-wrapper {
        flex: 1;
        margin-left: 62px;
        padding: 0;
        @media($sm-1679){
            margin-left: 52px;
        }
        @media($sm-1481){
            // width: 45%;
            margin-left: 42px

        }
        @media(max-width:1399px){
            width: 48%;
            margin-left: 20px;
        }
        @media($sm-1199){
            width: 48%;
            margin-left: 20px;
        }
        @media($sm-767){
            width: 100%;
            margin-top: 40px;
            max-width: 100%;
            margin-left: 0px;
        }
        @media($sm-579){
            margin-left: 0px;
        }
        .details-sec{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 32px 0px;
            border-bottom: 1px solid #DDE3EC;
            @media($sm-1679){
                padding: 25px 0px;
            }
            @media($sm-1441){
                padding: 20px 0px;
            }
            @media($sm-991){
                padding: 15px 0px;
            }
            .one-sec{
                display: flex;
                align-items: center;
                .phn{

                    font-size: 18px;
                    font-weight: 400;
                    line-height: 20px;
                    color: #313646;
                    @media($sm-1679){
                        font-size: 16px;
                    }
                    @media($sm-1441){
                        font-size: 14px;
                    }

                }
                .sub-cont{
                    padding-top: 12px;
                    font-size: 20px;
                    font-weight: 600;
                    line-height: 20px;
                    color: #00124D;
                    @media($sm-1679){
                        font-size: 18px;
                    }
                    @media($sm-1441){
                        font-size: 16px;
                    }
                    @media($sm-1199){
                        font-size: 14px;
                    }
                }
                .icon-sec{
                    margin-right: 26px;
                    width: 63px;
                    height: 63px;
                    border-radius: 50px;
                    border: 1px solid #D4E1E4;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    @media($sm-1679){
                        height: 53px;
                        width: 53px;
                        img{
                            width: 20px;
                            height: 20px;
                            object-fit: contain;
                        }
                    }
                    @media($sm-1441){
                        height: 43px;
                        width: 43px;
                        img{
                            width: 20px;
                        }
                    }

                }
            }
        }
        .img-sec{
            display: flex;
            justify-content: space-between;
            @media($sm-579){
                // flex-wrap: wrap;
                padding-top: 15px;
                justify-content: center;
                padding-top: 10px;
                margin: 10px;
            }
            .img1{
                width: 290px;
                height: 221px;
                @media(max-width:1399px){
                    margin-right: 10px;
                }
                @media($sm-1199){
                    margin-right: 10px;
                }
                @media($sm-991){
                    margin-bottom: 20px;
                    height: 180px;
                  
                   
                }
                @media(max-width:379px){
                    height: 140px;
                }

                &:last-child{
                    margin-right: 0px;
                }
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 15px;
                }
            }
           
        }
    }
}
}