/* 
/* 
/*  custom.css
/*
/*  If not using Gulp and Sass, add your custom CSS below then include it
/*  in your page by adding a reference to assets/css/custom.css in the head of each page.
/*
*/
@media (max-width: 1199.98px) {
    .flickity-prev-next-button {
        display: flex;
    }
}
@media (max-width: 767.2px) {
    .navbar > .container {
        max-width: 100%;
    }
}
@media (max-width: 480.2px) {
    .navbar-brand img {
        width: 120px;
    }
    #download {
        padding: 0.625rem 0.8rem;
        font-size: .8rem;
    }
}
.main-img{    
    padding-right: 10%;
}
/*mobile screen css code*/
@media (max-width:767px){
    .main-img{
        padding-right: 0;
    }
    #exampleModal h5 {
        width: calc(100% - 18px);
    }
    .d-flex.flex-wrap.justify-content-center.justify-content-lg-start {
        justify-content: left!important;
    }
    #step1 .d-flex.align-items-center{
        text-align: left!important;
    }
    .badge{
        font-size: 12px!important;
        width: 100%;
    }
    .badge span{
        font-size: 14px!important;
    }
    #phonediv1,
    #phonediv2,
    #phonediv3 {
        width: 63%!important;
    }
    #phonediv1 input,
    #phonediv2 input,
    #phonediv3 input{
        margin-left: 15px!important;
    }
    #filter1,
    #filter2,
    #filter3 {
        width: 100%!important;
    }
    #formid3 .form-group .position-relative,
    #formid1 .form-group .position-relative,
    #formid2 .form-group .position-relative{
        width: 30%!important;
    }
    #formid1 .form-group.subcity1 .position-relative,
    #formid1 .form-group.substate1 .position-relative,
    #formid2 .form-group.subcity2 .position-relative,
    #formid2 .form-group.substate2 .position-relative,
    #formid3 .form-group.subcity1 .position-relative,
    #formid3 .form-group.substate1 .position-relative,
    #formid1 .form-group.subcontactcenter1 .position-relative{
        width: 100%!important;
    }
    .alert.bg-secondary.rounded-lg.d-inline-block.mb-4{
        text-align: center;
        margin: auto;
        width: 100%;
    }
    li {
        text-align: left!important;
    }
    .m-2.aos-init.aos-animate {
        width: 100%;
    }
}