/*==========================================================
                    max width : 1400px
==========================================================*/

@media(max-width: 1400px){



header .main_header.mobile_header{
    background: var(--secondary-color);
    position: fixed;
    width: 340px;
    height: 100%;
    z-index: 999;
    top: 0;
    left: -340px;
    padding: 0;
    overflow: scroll;
    overflow-x: hidden;
    transition: .4s;
}
header .main_header.mobile_header.active{
    left: 0;
}
header .main_header.mobile_header .logo{
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
}

header .main_header.mobile_header .logo a{
    display: block;
}
header .main_header.mobile_header .logo a img{width: 100px;background: #fff;padding: 5px;}
header .main_header.mobile_header .header_menu{
    padding: 15px 10px;
}
header .main_header.mobile_header .logo a.close_btn{
    color: #fff;
    font-size: 30px;
    transform: rotate(45deg);
    width: 40px;
    height: 40px;
    line-height: 40px;
}
header .main_header.mobile_header .logo a.toggle-btn span{
    width: 30px;
    display: block;
    height: 2px;
    background: #fff;
    position: relative;
}
header .main_header.mobile_header .logo a.toggle-btn span:after,
header .main_header.mobile_header .logo a.toggle-btn span:before{
    content: "";
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
}
header .main_header.mobile_header .logo a.toggle-btn span:after{
    top: -8px;
}
header .main_header.mobile_header .logo a.toggle-btn span:before{
    top: 8px;
}
header .main_header.mobile_header .header_menu > ul{
    display: flex;
    flex-direction: column;
    align-items: start;
}
header .main_header.mobile_header .header_menu > ul > li{
    padding: 5px 0;
}
header .main_header.mobile_header .header_menu > ul > li > a{
    color: #e7e7e7;
    font-family: var(--primary-font);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    display: block;
}
header .main_header.mobile_header .header_menu > ul > li > a:after{
    content: "";
}
header .main_header.mobile_header .header_no{
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 10px 10px;
}
header .main_header.mobile_header .header_no .icon{
    border: 1px solid var(--primary-color);
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: var(--primary-color);
    color: #fff;
}
header .main_header.mobile_header .header_no .icon span{}
header .main_header.mobile_header .header_no .txt{
    height: 40px;
    line-height: 40px;
    border: 1px solid var(--primary-color);
    overflow: hidden;
}
header .main_header.mobile_header .header_no .txt a{
    font-family: var(--primary-font);
    font-size: 14px;
    display: block;
    letter-spacing: 1px;
    color: #e7e7e7;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    padding: 0 15px;
    z-index: 9;
}
header .main_header.mobile_header .header_no .txt a:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: .5s;
    box-shadow: 0 0 0 0px #b07c4b inset;
}
header .main_header.mobile_header .header_no .txt a:hover:before{
    box-shadow: 0 0 0 3em #b07c4b inset;
}
}

/*==========================================================
                    max width : 992px
==========================================================*/


@media(min-width: 992px){
    header .main_header .header_menu > ul > li > a.active:after,
    header .main_header .header_menu > ul > li > a:hover:after{
        width: 100%;
        opacity: 1;
    }
}


/*==========================================================
                    max width : 992px
==========================================================*/

@media(max-width: 992px){
    body{
        position: relative;
        overflow-x: hidden;
    }
    header{
        position: relative;
    }
    header .top_header{
    padding: 0;
    background: #1a243fa8;
}
header .top_header .left_theader{display: flex;flex-direction: column;align-items: start;padding: 10px;}
header .top_header .left_theader .theader_box{display: flex;align-items: start;}
header .top_header .left_theader .theader_box .icon{
    padding-right: 7px;
    padding-top: 3px;
}
header .top_header .left_theader .theader_box .icon span{
    color: var(--primary-color);
    font-size: 15px;
}
header .top_header .left_theader .theader_box .theader_txt{}
header .top_header .left_theader .theader_box .theader_txt a{
    display: block;
    font-size: 14px;
    color: #e2e2e2;
}
header .top_header .right_theader{
    padding: 10px 10px;
}
header .top_header .right_theader .r_theader_box{
    display: flex;
    align-items: center;
    justify-content: start;
}
header .top_header .right_theader .r_theader_box span{
    color: #e2e2e2;
    font-size: 14px;
}
header .top_header .right_theader .r_theader_box > ul{
    display: flex;
    align-items: center;
}
header .top_header .right_theader .r_theader_box > ul > li{
    padding: 0 5px;
}
header .top_header .right_theader .r_theader_box > ul > li > a{
    color: var(--primary-color);
}
/*header .main_header{
    background: var(--secondary-color);
    position: fixed;
    width: 340px;
    height: 100%;
    z-index: 999;
    top: 0;
    left: -340px;
    padding: 0;
    overflow: scroll;
    overflow-x: hidden;
    transition: .4s;
}
header .main_header.active{
    left: 0;
}
header .main_header .logo{
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
}

header .main_header .logo a{
    display: block;
}
header .main_header .logo a img{width: 70px;}
header .main_header .header_menu{
    padding: 15px 10px;
}
header .main_header .logo a.close_btn{
    color: #fff;
    font-size: 30px;
    transform: rotate(45deg);
    width: 40px;
    height: 40px;
    line-height: 40px;
}
header .main_header .logo a.toggle-btn span{
    width: 30px;
    display: block;
    height: 2px;
    background: #fff;
    position: relative;
}
header .main_header .logo a.toggle-btn span:after,
header .main_header .logo a.toggle-btn span:before{
    content: "";
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
}
header .main_header .logo a.toggle-btn span:after{
    top: -8px;
}
header .main_header .logo a.toggle-btn span:before{
    top: 8px;
}
header .main_header .header_menu > ul{
    display: flex;
    flex-direction: column;
    align-items: start;
}
header .main_header .header_menu > ul > li{
    padding: 5px 0;
}
header .main_header .header_menu > ul > li > a{
    color: #e7e7e7;
    font-family: var(--primary-font);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    display: block;
}
header .main_header .header_menu > ul > li > a:after{
    content: "";
}
header .main_header .header_no{
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 10px 10px;
}
header .main_header .header_no .icon{
    border: 1px solid var(--primary-color);
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: var(--primary-color);
    color: #fff;
}
header .main_header .header_no .icon span{}
header .main_header .header_no .txt{
    height: 40px;
    line-height: 40px;
    border: 1px solid var(--primary-color);
    overflow: hidden;
}
header .main_header .header_no .txt a{
    font-family: var(--primary-font);
    font-size: 14px;
    display: block;
    letter-spacing: 1px;
    color: #e7e7e7;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    padding: 0 15px;
    z-index: 9;
}
header .main_header .header_no .txt a:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: .5s;
    box-shadow: 0 0 0 0px #b07c4b inset;
}
header .main_header .header_no .txt a:hover:before{
    box-shadow: 0 0 0 3em #b07c4b inset;
}*/

.slider_sec .slider .slider_txt{
    width: 80%;
}
.topics{
    padding: 0 30px;
}
.topics .topic_box .topic_box_txt{}

.topics .topic_box{
    margin-bottom: 20px;
}

.serve_best .serve_box{
    
width: 100%;
    
position: relative;
    
padding: 30px;
}

.what_do .what_do_img img{
    height: auto;
}

.what_do .what_do_box{
    
position: relative;
    
width: 100%;
    
padding: 0;
    
top: 0;
    
left: 0;
}

.why_us{
    padding: 30px ;
}
.why_us .why_us_box{
    margin-bottom: 20px;
}

.testimonial .test_box{
    position: relative;
    width: 100%;
    top: -125px;
    padding: 0 0 15px;
}

.testimonial .test_img .count_cases{
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}

.testimonial .test_img img{margin-left: 0;}
.testimonial .test_img .count_cases .count_box{}

.about_us{
    padding: 40px 50px 60px;
}
.about_us .about_us_box .about_us_title{}
.about_us .about_us_box.about_txt{
    padding: 35px 0 0;
}

.map_contact .map_box{
    position: relative;
    width: 100%;
    top: 0;
    left: -12px;
}

    .page_breadcrumb{
        padding: 100px 0 50px;
    }

    .gallery_page{
        padding: 30px 20px;
    }
    .gallery_page .p_gal_img{
        margin-bottom: 20px;
    }

    .lawyers_page{
        padding: 30px 20px;
    }


    #flamelab-convo-widget img.popup-image {
        width: 200px;
    }
    .flamelab-cw-msg-box.popup-box {
        width: 250px;
        padding: 15px;
    }
    .flamelab-cw-button.popup-box-button {
        padding: 4px;
        margin-right: 6px;
    }

    .popup.contact_info.active {
        left: 28%;
    }
    .contact_info {
        padding: 20px 15px;
        width: 360px;
    }
    .contact_info .cont_form {
        padding-top: 3px;
    }





}


/*==========================================================
                    max width : 768px
==========================================================*/


@media(max-width: 768px){

    .topics{
        margin-top: 0;
        padding: 20px;
    }
    .contact_info{
        padding: 20px;
    }
    .what_do .what_do_box{
        top: 0px;
        left: -12px;
    }
    .gallery .gal_video .gal_video_box{
        margin-bottom: 20px;
    }
    .testimonial .test_img .count_cases{}
    .testimonial .test_box{
    top: 0;
    left: -12px;
}
    .gallery_page{
        padding: 20px 15px;
    }

    #flamelab-convo-widget img.popup-image {
        width: 186px;
    }
    .flamelab-cw-msg-box.popup-box {
        width: 220px;
        padding: 15px;
    }
    .flamelab-cw-button.popup-box-button {
        padding: 4px;
        margin-right: 6px;
    }

    .popup.contact_info.active {
        left: 28%;
    }
    .contact_info {
        padding: 20px 15px;
        width: 360px;
    }
    .contact_info .cont_form {
        padding-top: 3px;
    }



}



/*==========================================================
                    max width : 576px
==========================================================*/


@media(max-width: 576px){
    header .desk_logo{
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #flamelab-convo-widget img.popup-image {
        width: 156px;
    }
    .flamelab-cw-msg-box.popup-box {
        width: 220px;
        padding: 15px;
    }
    .flamelab-cw-button.popup-box-button {
        padding: 4px;
        margin-right: 6px;
    }
    .flamelab-cw-msg-box.popup-box {
        left: 25%;
    }
    .popup.contact_info.active {
        left: 20%;
    }
    .contact_info {
        padding: 20px 15px;
        width: 320px;
    }
    .contact_info .cont_form {
        padding-top: 20px;
    }
    .slider_sec .slider .slider_txt h1{
        font-size: 2.3em;
    }
    .contact_info{
        padding: 0 15px;
    }
    .contact_info .first_box{
        margin-bottom: 20px;
    }
    .serve_best .serve_box{
        padding: 20px 10px;
    }
    .what_do .what_do_img{
        height: auto;
    }
    .what_do .what_do_box{
        width: 100%;
        top: 0;
    }
    .what_do .what_do_box .txt{
        padding: 30px 0 0 12px;
    }
    .why_us{
        padding: 20px 15px;
    }
    .testimonial .test_img .count_cases{
        top: 5%;
    }
    .testimonial .test_img .count_cases .count_box{
        height: 200px;
    }
    .testimonial .test_img{
        height: 437px;
        overflow: hidden;
    }
    .testimonial .test_img img{
        width: 120%;
        margin-left: -85px;
        margin-top: -85px;
    }
    .testimonial .test_box .main_title{
        padding: 50px 30px 0;
    }
    .testimonial .test_box .test_slider{
        padding: 30px 30px 0;
    }
    .map_contact .map_box .map_cont_info .map_cont_box{
        width: 100%;
    }
    footer{
        padding: 30px 15px 0;
    }
    .footer_box_title.footer_ii_link{
        display: none;
    }
    footer .footer_box .footer_logo{
        padding: 20px 0;
        text-align: center;
    }
    .footer_bottom{
        padding: 10px 15px;
    }
    .footer_bottom p{}


    .page_breadcrumb{
        padding: 50px 0;
    }
    .page_breadcrumb span{
        font-size: 16px;
        padding: 0;
    }
    .page_breadcrumb h1{
        font-size: 26px;
    }
    .gallery_page{
        padding: 15px 10px;
    }
    .lawyers_page{
        padding: 20px 10px;
    }
    .lawyers_page .lawyers_box .l_icon{
        width: 50px;
        height: 50px;
    }
    .lawyers_page .lawyers_box .l_icon span{
        font-size: 20px;
    }



}



/*==========================================================
                    max width : 420px
==========================================================*/



@media(max-width: 420px){
    .slider_sec .slider .slider_txt{
        width: 100%;
        padding: 0 15px;
        padding-top: 50px;
        top: 0;
        left: 0;
        transform: initial;
        height: 100%;
    }
    #flamelab-convo-widget img.popup-image {
        width: 136px;
    }
    .flamelab-cw-msg-box.popup-box {
        width: 210px;
        padding: 15px;
    }
    .flamelab-cw-button.popup-box-button {
        padding: 4px;
        margin-right: 6px;
    }
    .flamelab-cw-msg-box.popup-box {
        left: 25%;
    }
    .popup.contact_info.active {
        left: 13%;
        top: 16%;
    }
    .contact_info {
        padding: 20px 15px;
        width: 320px;
    }
    .contact_info .cont_form {
        padding-top: 20px;
    }
    .slider_sec .slider .slider_txt h1{
        font-size: 2em;
    }
    .topics .topic_box.second_box img{
        height: 100%;
    }
    .why_us{
        padding: 20px 10px;
    }
    .why_us .main_title{
        padding: 0 0 15px;
    }
    .why_us .why_us_box .why_us_txt{
        padding: 10px 15px;
    }
    .why_us .why_us_box .why_us_txt p{
        font-size: 16px;
    }
    .gallery{
        padding: 20px 15px;
    }
    .gallery .main_title{
        padding: 0 0 15px;
    }
  
    .gallery .gal_video{
        padding: 20px 0 0;
    }
    .testimonial .test_img{
        height: auto;
    }
    .testimonial .test_img .count_cases{
        top:-7px;
        left:0;
        transform: translate(0, 0);
        width: 100%;
        padding: 10px;
    }
    .testimonial .test_img .count_cases .count_box{
        height: 150px;
    }
    .testimonial .test_img .count_cases .count_box .icon{}
    .testimonial .test_img .count_cases .count_box .icon span{
    font-size: 50px;
}
    .testimonial .test_img .count_cases .count_box .count_no .no{}
    .testimonial .test_img .count_cases .count_box .count_no .no span{
    font-size: 26px;
}
    .testimonial .test_img .count_cases .count_box .count_no .no_title{}
    .testimonial .test_img .count_cases .count_box .count_no .no_title p{
        font-size: 15px;
    }
    .about_us{
        padding: 20px 10px;
    }

    .map_contact .map_box .main_title,
    .map_contact .map_box .sub_title,
    .map_contact .map_box .map_cont_info{
        padding-left: 25px;
    }

    .page_breadcrumb span{
        font-size: 14px;
    }
    .page_breadcrumb h1{
        font-size: 20px;
    }
    .page_data{
        padding: 20px 15px;
    }

    .contact_info .first_box .cont_page_title h1{
        font-size: 20px;
    }




}



/*==========================================================
                    max width : 360px
==========================================================*/



@media(max-width: 360px){
    .slider_sec .slider .slider_txt h1{
        font-size: 1.6em;
    }
     #flamelab-convo-widget img.popup-image {
        width: 126px;
    }
    .flamelab-cw-msg-box.popup-box {
        width: 200px;
        padding: 10px;
    }
    .flamelab-cw-button.popup-box-button {
        padding: 4px;
        margin-right: 6px;
    }
    .flamelab-cw-msg-box.popup-box {
        left: 25%;
    }
    .popup.contact_info.active {
        left: 10%;
    }
    .contact_info {
        padding: 20px 15px;
        width: 270px;
    }
    .topics .topic_box{
        height: auto;
    }
    .topics .topic_box .topic_read_more{
        padding-bottom: 15px;
    }
    .contact_info .first_box .title{
        padding: 0 0 10px;
    }
    .contact_info .first_box .title h1{
        font-size: 26px;
    }
    .testimonial .test_img .count_cases{
        height: auto;
        top: 2%;
    }
    .testimonial .test_img img{
        margin: 0;
    }
    .map_contact .map_box .sub_title{
        padding-bottom: 15px;
    }
    .map_contact .map_box .sub_title h3{
        font-size: 30px;
    }
    .contact_info.page_contact{
        padding: 0;
    }
    .contact_info .first_box .cont_page_title{
        padding: 20px 25px 15px 0;
    }
    .contact_info .first_box .cont_page_title h1{
        font-size: 20px;
    }
    .contact_info .first_box .cont_page_txt{
        padding: 0 25px 0 0;
    }
    .contact_info .first_box .cont_page_txt p{
        line-height: 1;
        font-size: 30px;
    }
    .contact_info .first_box.page_first_box .header_no{
        width: 100%;
    }
    .contact_info .first_box.page_first_box .header_no{
        padding: 30px 30px 32px 0;
    }
    .contact_info .first_box.page_first_box .header_no .txt a{
        padding: 0 17px;
    }
    .contact_info .cont_form.page_cont_form .form_box{
        width: 90%;
    }
    .contact_info .cont_form.page_cont_form .title{
        width: 90%;
    }
    .contact_info .cont_form.page_cont_form{
        padding: 50px 0 20px;
    }



}