@media (min-width: 768px) and (max-width: 1024px) {

    #service .about_left ul.connect_top_space{ display:none}	
    #service .about_left .contact_text .view{ display:none}
}



@media (min-width: 768px) and (max-width: 1000px) {

    #wrapper { margin: 0 auto; width: auto; max-width:1000px }

    #header { width: 100%; max-width:1000px }

    #banner { width:  100%; max-width:1000px }

    #banner img { width:auto; height:100%; max-width:100% }

    #page { width:  100%; max-width:1000px }

    #footer { width:  100%; max-width:1000px }

    #page_inner { width:  100%; max-width:1000px }

    * { box-sizing:border-box; -webkit-box-sizing:border-box }

    #left_section { float: left; width: 70%; padding-right:30px; }

    #right_section { float: right; width: 30%; }

    #left_section .heading { width:100% }

    #left_section .thumb { width:100% }

    #left_section .thumb ul { width:100% }

    #left_section .left_sec_bg { width:100% }

    #left_section .left_sec_top { width:100% }

    #left_section .left_sec_bottom { width:100% }

    #left_section .left_sec_inner { width:100% }

    #left_section .left_bottom { width:100% }

    img { width: auto\9; height: auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; }

    #footer_inner { width: 100%; }

    #footer_inner .footer_menu ul { width:100% }

    #footer_inner .footer_menu { width:100% }

    #left_section .left_sec_inner img { float: left; width: 50%; }

    #left_section .left_sec_bottom { background-size:100% auto; padding-right:15px }

    #left_section .left_sec_top { background-size:100% auto }

    #left_section .left_sec_bg { background-size:100% auto; }

    #left_section .left_sec_inner .web_tech { width:50% }

    #left_section .left_sec_inner .web_tech p { width:100% }

    #left_section .left_sec_inner .web_tech h2 { font-size:17px }

    #left_section .thumb ul li { width:22.6% }

    #left_section .thumb ul li .thumb_inner span.head { font-size:12px; line-height:16px; font-weight:bold }

    #left_section .thumb ul li .thumb_inner { width:100%; position:relative; min-height:104px; }
    #left_section .thumb ul li .thumb_inner .more01{ position:absolute; bottom:13px; right:14px}
    #service .about_left .contact_text .view{ padding-left:80px}
    #right_section .our_testimonials h2 { font-size:15px }

    .more_arrow a { margin:-2px 0 0 }

    #right_section .comment_box_inner { width:100% }

    #right_section .comment_box_inner p { width:100% }

    #right_section .comment_box_inner p strong { width:100% }

    #right_section .comment_box { width:100% }

    #right_section .logo_section { width:100% }

    #right_section .logo_section ul { width:100% }

    #right_section .logo_section ul li { width:33% }
    #right_section .logo_section ul li:nth-child(2n){ margin:5px 0 0 8px; padding-left:10px; width:30%}
    #right_section .logo_section ul li.last{ padding-left:31px; margin-left:-16px}



    #right_section .our_clients { width:100% }

    #right_section .clients { width:100% }

    #right_section h2 { padding-bottom:3px }

    #right_section .join_us { width:100% }

    #right_section .join_us ul { width:100% }

    #right_section .join_us ul li { width:100% }

    #right_section .join_us ul li.facebook { width:100% }

    .crousal_btn .crousal_row .crousal_bg ul { width:145px }









    .about_left iframe{ width:100%!important}

    #service .about_left .contact_text p{ font-size:16px; line-height:20px}

    #left_section .left_sec_inner .web_tech ul li.last{ margin-right:-7px}

    #left_section .thumb ul li{ height:187px!important;}

    /* work */



    #clients { width:100% }

    .work { width:100% }

    #work_details { width:100% }

    #clients .work01 { width:100%; padding:0 30px }

    #clients .work01 ul { width:100% }

    #clients .work01 ul li { float:left; width:25%; padding:15px!important }

    #clients .work01 ul li .work_bg { width:100%!important; background:#fff; box-shadow:0 0 3px #333 }

    #clients .work01 ul li .work_inner { width:100%!important; background:#fff }

    #clients .work01 ul li .work_bottom { width:100%!important; background:#fff }

    #clients .work01 ul li .work_inner { width:100%!important }

    #clients .work01 ul li .work_inner .text { width:100%!important }

    #clients .work01 ul li .work_top { width:100%!important }

    #clients .work01 ul li .work_inner .text h2 { width:96% }

    #clients .work01 ul li .work_inner .text p { float:left; width:91% }

    #clients .work01 ul li .work_inner .text ul { width:90% }

    #clients .work01 ul li .work_inner li { padding:5px!important }

    /* services */





    #service { float: left; width: 100%; }

    .about_banner { width:100% }

    #service .service_inner { width:100% }

    #service .about_left { width:65%; padding-right:30px }

    #service .about_left ul { width:100% }

    #service .about_left h2 { width:100% }

    #service .about_left p { width:100% }

    #service .about_left ul li.connect_box { width:100% }

    #service .about_left ul li .connect_box_bg { background:none; width:100%; box-shadow:0 0 3px #333; border-radius:3px; margin:10px 0 }

    #service .about_left ul li .connect_box_top { background:none; width:100% }

    #service .about_left ul li .connect_box_bottom { background:none; width:100% }

    #service .about_left ul li .connect_box_inner { width:100% }

    #service .about_left ul li .connect { width:100% }

    #service .about_left ul li .connect a { width:110px }

    #service .about_left ul li .connect a.first { width:110px; }

    #service .about_left ul li .connect a.second { width:110px; }

    #service .about_right { width:35% }

    #service .about_right h2 { width:100% }

    #service .about_right ul { width:100% }



    #service .about_right ul li { width:100%!important }

    #service .about_right .form_outer { width:100% }

    #service .about_right .form_section { width:100%; padding-bottom:25px }

    #service .about_right .form_row { width:100% }

    #service .about_right .form_row label { width:100% }

    #service .about_right .form_section fieldset { float:left; width:100% }

    #service .about_right .form_row input { width:100% }

    #service .about_right .form_row textarea { width:100% }

    #service .service_banner{ width:100%}

    #service .banner_text_bg{ width:80%}

    #service .service_inner h2{ width:100%}

    #service .service_inner ul{ width:100%}

    #service .service_inner ul li{ /*width:100%;*/ padding:0 0 20px; float:left; width:22%}

    #service .service_inner ul li .content h3{ font-size:16px; line-height:20px; padding-bottom:20px;}

    #service .service_inner ul li .content h3.second{ padding-bottom:20px}

    #service .service_inner ul li .content p{ width:100%}

    #service .service_inner ul li .content ul.bottom_list{ width:98%}

    #service .service_inner ul li .content ul.bottom_list li{ width:100%}

    #service .banner_text_bg p{ font-size:33px; line-height:42px}

    .contact_banner{ width:100%}

    #service .service_inner .about_right ul li{ padding:20px 0}

    #service .service_banner{ background-size: cover}

    /*clients */

  

    #work_details .work_details_inner_top{ width:100%}

    #work_details .work_details_inner{ width:100%}

    #work_details .work_details_inner_top .details_left{ width:100%}

    #work_details .work_details_banner{ width:100%; height:auto;}

    .details_text .details_bg p{ font-size:22px; line-height:26px;}

   

    #work_details .work_details_inner .details_left {

        float: left;

        width: 70%;

        padding-right:30px

    }

    #work_details .work_details_inner .details_left iframe{ width:100%!important}

    #work_details .work_details_inner .details_left h2{ width:100%}

    #work_details .work_details_inner .details_left p{ width:100%}

    #work_details .work_details_inner .details_left ul{ width:100%}



    #work_details .work_details_inner .details_right{ width:30%; }

    #work_details .work_details_inner .details_right h2{ width:100%}

    #work_details .work_details_inner .details_right p{ width:100%}

    #clients .clients_logo{ width:100%}

    #clients .clients_logo ul{ width:100%;padding: 14px 37px 0;}

    #service .about_left .contact_text p strong.left_space01{ padding-left:80px}

    .project_row .project_bg ul li{ padding-left:20px}

    #menu ul li a{ font-size:18px; line-height:23px}

    #service .about_left .contact_text p strong.left_space{ padding-left:29px}
    #service .about_left .contact_text p strong{ padding-left:15px}

    .connect_top_space{ display:none}
    .about_bg p{ font-size:35px}
    #service .about_left .contact_text .view{ display:none}

    #clients .clients_logo ul { padding:0 20px}
    #clients .clients_logo ul li{ width:24%; text-align:center}


}

@media (max-width: 767px) {

    #right_section .clients { background-repeat:repeat }

    #outer_wrapper { overflow:hidden }

    #left_section { width: 100%; padding-right:0; }

    #right_section { width: 100%; margin:20px 0 0 0 }

    #wrapper { margin: 0 auto; width: auto; max-width:1000px }

    #header { width: 100%; max-width:1000px; padding-bottom:0px }

    #banner { width:  100%; max-width:1000px; /*height:180px*/ }

    #banner img { width:auto; height:100%; width:100% }

    #banner .swiper-container, #banner .swiper-slide {
        height: 180px;
    }

    #page { width:  100%; max-width:1000px }

    #footer { width:  100%; max-width:1000px }

    #page_inner { width:  100%; max-width:1000px }

    * { box-sizing:border-box; -webkit-box-sizing:border-box }

    #left_section .heading { width:100% }

    #left_section .thumb { width:100% }

    #left_section .thumb ul { width:100% }

    #left_section .left_sec_bg { width:100% }

    #left_section .left_sec_top { width:100% }

    #left_section .left_sec_bottom { width:100% }

    #left_section .left_sec_inner { width:100% }

    #left_section .left_bottom { width:100% }

    img { width: auto\9; height: auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; }

    #footer_inner { width: 100%; }

    #footer_inner .footer_menu ul { width:100% }

    #footer_inner .footer_menu { width:100% }

    #left_section .left_sec_inner img { float: left; width: 45%; }

    #left_section .left_sec_bottom { background-size:100% auto; padding-right:15px }

    #left_section .left_sec_top { background-size:100% auto }

    #left_section .left_sec_bg { background-size:100% auto; }

    #left_section .left_sec_inner .web_tech { width:55% }

    #left_section .left_sec_inner .web_tech p { width:100% }

    #left_section .left_sec_inner .web_tech h2 { font-size:17px }

    #left_section .thumb ul li { width:22.5% ; position:relative}

    #left_section .thumb ul li .thumb_inner span.head { font-size:18px; line-height:20px; font-weight:bold }

    #left_section .thumb ul li .thumb_inner { width:100% }

    #right_section .our_testimonials h2 { font-size:20px }

    .more_arrow a { margin:-7px 0 0 }

    #right_section .comment_box_inner { width:100% }

    #right_section .comment_box_inner p { width:100% }

    #right_section .comment_box_inner p strong { width:100% }

    #right_section .comment_box { width:100% }

    #right_section .logo_section { width:100% }

    #right_section .logo_section ul { width:100%; text-align:center }

    #right_section .logo_section ul li { width:33%; float:none; display:inline-block }

    #right_section .our_clients { width:100% }

    #right_section .clients { width:100% }

    #right_section h2 { padding-bottom:3px }

    #right_section .join_us { width:100% }

    #right_section .join_us ul { width:100% }

    #right_section .join_us ul li { width:100% }

    #right_section .join_us ul li.facebook { width:100% }

    .crousal_btn .crousal_row .crousal_bg ul { width:145px }

    #footer_inner p { width:100% }

    .banner_text { width:85%; background-repeat:repeat; bottom:30px; }

    .banner_text h1 { width:100% }

    .banner_text h1 { font-size:22px; line-height:26px }



    .project_row .project_bg ul li{ padding-left:20px}



    .about_left iframe{ width:100%!important}
    #left_section .thumb ul li img{ width:100%}


    /* work */

     #work_details_banner .swiper-container, #work_details_banner .swiper-slide{
        height: 180px;
    }


    #clients { width:100% }

    .work { width:100% }

    #work_details { width:100% }

    #clients .work01 { width:100%; padding:0 30px }

    #clients .work01 ul { width:100%; padding:0 }

    #clients .work01 ul li { float:left; width:50%; padding:15px!important }

    #clients .work01 ul li .work_bg { width:100%!important; background:#fff; box-shadow:0 0 3px #333; min-height:255px }

    #clients .work01 ul li .work_inner { width:100%!important; background:#fff }

    #clients .work01 ul li .work_bottom { width:100%!important; background:#fff }

    #clients .work01 ul li .work_inner { width:100%!important }

    #clients .work01 ul li .work_inner .text { width:100%!important }

    #clients .work01 ul li .work_top { width:100%!important }

    #clients .work01 ul li .work_inner .text h2 { width:96% }

    #clients .work01 ul li .work_inner .text p { float:left; width:91% }

    #clients .work01 ul li .work_inner .text ul { width:90% }

    #clients .work01 ul li .work_inner li { padding:5px!important }

    #clients .work01 ul li .work_inner { height:auto!important }

    #clients .work01 ul li .work_inner .workimage { width:100% }

    /* services */





    #service { float: left; width: 100%; }

    .about_banner { width:100%; padding-right:20px; background-size: cover!important;  }

    #service .service_inner { width:100% }

    #service .about_left { width:100%; padding-right:0 }

    #service .about_left ul { width:100% }

    #service .about_left h2 { width:100% }

    #service .about_left p { width:100% }

    #service .about_left ul li.connect_box { width:100% }

    #service .about_left ul li .connect_box_bg { background:none; width:100%; box-shadow:0 0 3px #333; border-radius:3px; margin:10px 0 }

    #service .about_left ul li .connect_box_top { background:none; width:100% }

    #service .about_left ul li .connect_box_bottom { background:none; width:100% }

    #service .about_left ul li .connect_box_inner { width:100% }
    #service .about_left ul li .connect_box_inner img{ width:auto}
    #service .about_right ul li img{ width:auto!important}
    #service .about_left ul li.connect_box{ margin-left:0px}

    #service .about_left ul li .connect { width:100% }

    #service .about_left ul li .connect a { width:110px }

    #service .about_left ul li .connect a.first { width:110px; }

    #service .about_left ul li .connect a.second { width:110px; }

    #service .about_right { width:100%; float:left }

    #service .about_right h2 { width:100% }

    #service .about_right ul { width:100% }



    #service .about_right ul li { width:100%; margin-bottom:0!important; padding:12px 0 12px 0!important; float:left }

    #service .about_right .form_outer { width:100% }

    #service .about_right .form_section { width:100%; padding-bottom:25px }

    #service .about_right .form_row { width:100% }

    #service .about_right .form_row label { width:100% }

    #service .about_right .form_section fieldset { float:left; width:100% }

    #service .about_right .form_row input { width:100% }

    #service .about_right .form_row textarea { width:100% }

    #service .service_banner{ width:100%}



    #service .service_inner h2{ width:100%}

    #service .service_inner ul{ width:100%}

    #service .service_inner ul li{ width:100%;  float:left!important; margin:0 0 20px; /*padding:0*/ }



    #service .service_inner ul li .content{ width:100%; float:left; min-height:358px}



    #service .service_inner ul li .content h3{ font-size:22px; line-height:24px; padding:10px 0 ; }

    #service .service_inner ul li .content h3.second{ padding-bottom:20px}

    #service .service_inner ul li .content p{ width:100%}

    #service .service_inner ul li .content ul.bottom_list{ width:98%}

    #service .service_inner ul li .content ul.bottom_list li{ width:100%}

    #service .banner_text_bg p{ font-size:33px; line-height:42px}



    #service .banner_text_bg p {

        font-size: 19px;

        line-height: 24px; width:73%

    }



    #service .banner_text_bg {

        width: 100%;

    }



    .about_bg {width:100%; padding:20px 5px 49px 15px}

    .about_bg p { font-size:19px; line-height:26px; width:73% }



    #service .about_left ul li.connect_box{ margin-bottom:0}







    .contact_banner{ width:100%}

    #service .about_left .contact_text p{ font-size:16px; line-height:20px}

    #service .about_left .contact_text{ width:100%}

    #service .about_left .contact_text .view{ float:right; padding:30px 0 0 0}

    #service .service_inner ul li{ width:46%; margin-right:3%; padding-bottom:0px; min-height:123px}	
    #service .service_inner ul li:nth-child(3){ margin-left:0px}

    /*clients */



    #work_details .work_details_inner_top{ width:100%}

    #work_details .work_details_inner{ width:100%}

    #work_details .work_details_inner_top .details_left{ width:100%}

    #work_details .work_details_banner{ width:100%; height:auto;}

    .details_text .details_bg p{ font-size:22px; line-height:26px;}

    .details_text {width: 85%;background-repeat: repeat; bottom: 30px;}

    #work_details .work_details_inner .details_left {

        float: left;

        width: 100%;

        padding-right:0

    }

    #work_details .work_details_inner .details_left h2{ width:100%}

    #work_details .work_details_inner .details_left p{ width:100%}

    #work_details .work_details_inner .details_left ul{ width:100%}



    #work_details .work_details_inner .details_right{ width:100%; float:left; padding-top:30px }

    #work_details .work_details_inner .details_right h2{ width:100%}

    #work_details .work_details_inner .details_right p{ width:100%}

    #work_details .project_list01{ float:left; position:static; margin-top:-3px; width:100%; border:none; background:#3d3b3b}

    .project_row{ float:right}

    .details_text .details_bg{ width:85%}

    .details_text .details_bg{ padding:15px}

    .details_text .details_bg p {

        font-size: 18px;

        line-height: 22px;

    }

    #work_details .work_details_inner .details_left iframe{ width:100%!important}

    /* client logo */



    #clients .clients_logo{ width:100%}

    #clients .clients_logo ul{ width:100%;   padding: 14px 37px 0;}

    /* menu */



    #menu{ float:left; width:100%; padding:0 0 0 0;  margin:15px 0 0 0; background:#0098a1}

    #menu ul{ float:left; width:100%; margin:0; padding:0; display:none}

    #menu ul li{ width:100%; border-bottom:1px solid #198D94; padding:4px 0; margin:0; text-align:center}
    #menu ul li:last-child{ border:none}

    #menu ul li a{ font-size:16px; color:#fff; float:left; width:100%; padding:7px 0}
    #menu ul li a:hover{ color:#000}
    #menu ul li .menuactive{color:#000}

    #service .service_inner ul li img{ width:100%}
    #footer_inner p{ font-size:17px; line-height:22px}
    #footer_inner .footer_menu{ padding-top:20px!important}
    #footer_inner p.web{ float:left; padding-bottom:20px}
    #service .service_banner{ background-size: cover}
    /*#service .about_left .contact_text p strong.left_space01{ padding-left:80px}*/
    #clients .work01 ul li .work_inner .text ul li{ margin-left:-4px}
    #right_section .clients a img{ width:100%}
    .connect_top_space{ display:none}
    #work_details .work_details_inner_top .details_left h2{ width:auto}
    #right_section .logo_section ul li.last{ /*padding-left:15px*/}
    #right_section .logo_section ul li{ width:auto ;padding-left:11px}
    /*#left_section .thumb ul li .thumb_inner{ position:relative; min-height:52px}*/
    #left_section .thumb ul li .thumb_inner .more01{ position:absolute; bottom:0px; right:10px}
    /*#left_section .thumb ul li{ min-height:240px}*/
    .contact_banner { padding:39px 8px 40px 20px}

    .contact_banner { width:100%;float:left;padding:39px 19px 40px 20px; background-size:cover!important;}
    #service .about_left .contact_text .view{ display:none}
    #service .service_inner ul li:first-child img{ margin-right:30px}
    .content ul li{ min-height:inherit!important} 
    #service .about_left .contact_text p strong{ font-weight:normal}
    #service .about_left .contact_text p strong.left_space01{ padding-left:4px; float:none;}
    #service .about_left .contact_text p{ width:100%}
/*    .toggleMenu{background:url(toggle_img1.png) no-repeat 0 0; width:24px; height:16px; float:right; margin:-45px 20px 0 0; display:block} 

    .toggleMenu.cross{ background:url(toggle_img1.png) no-repeat 0 -15px}*/
   
     .toggleMenu{float:right; margin:-45px 20px 0 0;display:block} 
     /*     #nav-toggle { position: absolute; left: 50%; top: 50%; }*/

            #nav-toggle { cursor: pointer; padding: 0px 35px 16px 0px; }
            #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
                cursor: pointer;
                border-radius: 1px;
                height: 5px;
                width: 35px;
                background: rgb(0,152,161);
                position: absolute;
                display: block;
                content: '';
            }
            #nav-toggle span:before {
                top: -10px;
            }
            #nav-toggle span:after {
                bottom: -10px;
            }

            #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
                transition: all 200ms ease-in-out;
            }
            #nav-toggle.active span {
                background-color: transparent;
            }
            #nav-toggle.active span:before, #nav-toggle.active span:after {
                top: 0;
            }
            #nav-toggle.active span:before {
                transform: rotate(45deg);
            }
            #nav-toggle.active span:after {
                transform: rotate(-45deg);
            }
    

    #clients .clients_logo ul { padding:0 10px}
    #clients .clients_logo ul li{ width:32%; text-align:center}
}
@media (max-width: 600px) {

    #service .service_inner ul li{ min-height:136px}	
    .content ul li{ min-height:inherit!important}


}



@media (max-width: 479px) {

    #left_section .left_sec_inner img { width:100% }

    #left_section .left_sec_inner .web_tech { width:100% }

    #left_section .left_sec_bg { background:none; box-shadow:0 0 3px #ccc }

    #left_section .left_sec_top { background:none }

    #left_section .left_sec_bottom { background:none; padding-right:0 }

    #left_section .thumb ul li { float: left; margin: 0 0 20px; width: 100%; }

    #left_section .thumb ul li img { width:100% }

    .more_arrow a { margin:-2px 0 0 0 }

    #clients .work01 ul li { float:left; width:100%; padding:10px!important }

    /*.details_text .details_bg{ display:none}*/

    #clients .clients_logo ul { padding:0 10px}
    #clients .clients_logo ul li{ width:47%; text-align:center}

    #service .service_inner ul li{ width:100%; margin-left:0px; min-height:inherit}


    #footer_inner .footer_menu ul li{ float:left; width:100%; background:none; padding-left:0px}

    #footer_inner p{ font-size:17px; line-height:22px}
    #footer_inner .footer_menu{ padding-top:20px!important}
    #footer_inner p.web{ float:left; padding-bottom:20px}

    #service .service_inner ul li .content{ min-height:277px}
    /*#left_section .thumb ul li{ height:auto!important}*/
    #service .banner_text_bg{ padding:0px}
    #service .service_banner{ padding:39px 27px 40px 31px}
    .about_banner {padding-right:0px;}

    #left_section .thumb ul li{ width:48%; /*min-height:203px;*/ margin-right:2%}
    /*#left_section .thumb ul li .thumb_inner{ position:relative; min-height:52px}*/
    /*#left_section .thumb ul li .thumb_inner .more01{ position:absolute; bottom:-51px; right:10px}*/

    .about_bg{ padding:0 5px 2px 15px; width:81%}

    #service .service_inner ul li:first-child img{ margin-right:30px}
    /*.contact_banner .about_bg{ width:100%}*/
    /*#service .banner_text_bg p{ width:auto}*/

    .about_bg p{ width:100%}

    /*#service .about_left .contact_text p strong{ font-weight:normal;}*/

    #service .about_left .contact_text p{ width:100%}
    #service .about_left .contact_text p strong.left_space01{ float:left; padding-left:80px}


}

@media (max-width: 320px) {
    #service .banner_text_bg p{ width:auto}	
    .contact_banner .about_bg{ width:100%}

}
#clients .clients_logo ul li{
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -o-transition:all 1s ease;
    transition:all 1s ease;
}

#footer_inner strong a{
  color: #05edfb!important;
}