/** ===========================================

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

=============================================**/



@media (min-width: 768px) and (max-width: 1024px) {
    .htc__subscribe__inner h2 {
        color: #343434!important;
        font-size: 30px!important;
    }
    .newsletter__form .input__box input[type="email"] {
        width: 340px!important;
    }
    .newsletter__form .input__box button {
        width: 100px!important;
        font-size: 16px!important;
    }

    .ml-70 {
        margin-bottom: 65px;
    }

    .footer-widget .links-widget {
        margin-top: 30px!important;
    }

    .footer-top {
        padding-bottom: 40px;
    }

    .footer-botton .copyright p {
        padding-bottom: 0px;
    }
    .pull-right {
        padding-top: 0px;
    }

    .ptb-100 {
        padding-top: 30px;
    }

    .services-details-info  {
        padding-left: 0px;
    }

    .about-style-two {
        padding-top: 30px;
    }

    .about-style-two .image_block_3 .image-box {
        margin-left: 0px;
        margin-top: 30px;
    }
    .image_block_3 .image-box .pattern .pattern-2 {
        right: -25px;
    }

    .accordion-box .block {
        margin-left: -60px;
    }
    .faq-section {
        margin-bottom: -125px;
    }

    .blog-page-section {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .blog-page-item .blog-page-content {
        padding-top: 20px;
    }

    .contact-info-area {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .contact-info-box .icon h3 {
        font-size: 20px;
    }

    .contact-form {
        padding: 30px 0px 80px;
    }

    .contact-form h3 {
        font-size: 40px;
    }


    .arlo_tm_about {
        padding-top: 30px;
        margin-bottom: 40px;
    }
    .arlo_tm_about .about_inner {
        padding-top: 0px;
    }

    .sec-p100-bg-bs {
        padding: 30px;
    }

    .sec-p100-bg-bs p {
        margin: 0px;
        padding: 0px;
    }

    #graphicdesign, #photography, #technology, #design, #webdevelopment, #application {
        padding: 30px 30px;
    }

    .single_experties {
        margin-bottom: 25px !important;
    }

    .skilled-tittle, .progress {
        width: 100%;
    }

    .experience-left {
        padding: 0px 0px;
    }

    .experience-left .experience-left-item-area {
        padding: 30px 30px;
    }

    h2.title {
        font-size: 16px;
        text-align: left;
    }

    .experience-left .experience-item .post-mate {
        margin-top: -25px;
    }

    .experience-right {
        margin-top: 30px;
    }

    .experience-right .achivement {
        padding: 30px;
    }

    .heading-main {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .contact-section.modern .ord-xl-1 {
        order: 1;
        padding-bottom: 30px;
    }

    .contact-title {
        margin-top: -40px;
    }

    .contact-info ul {
        padding-left: 0px;
    }










}


/** ===========================================

        @media only screen and (min-width: 480px) and (max-width: 768px)

=============================================**/

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .sec-title h2 {
        font-size: 40px;
    }

    .feature-section {
        padding: 80px 0px;
    }
    .htc__subscribe__inner h2 {
        color: #343434!important;
        font-size: 30px!important;
    }
    .newsletter__form .input__box input[type="email"] {
        width: 340px!important;
    }
    .newsletter__form .input__box button {
        width: 100px!important;
        font-size: 16px!important;
    }

    .ml-70 {
        margin-left: 0px!important;
        margin-top: 30px;
    }
    .footer-top .appointment-widget {
        margin-top: 20px;
    }

    .footer-top {
        padding-bottom: 20px;
    }

    .footer-botton .copyright p {
        line-height: 30px
    }
    .pull-right {
        padding-top: 0px;
    }

    .ptb-100 {
        padding-top: 30px;
    }

    .services-details-info  {
        padding-left: 0px;
    }

    .about-style-two {
        padding-top: 30px;
    }

    .about-style-two .image_block_3 .image-box {
        margin-left: 0px;
        margin-top: 30px;
    }
    .image_block_3 .image-box .pattern .pattern-2 {
        right: -25px;
    }

    .accordion-box .block {
        margin-left: -60px;
    }
    .faq-section {
        margin-bottom: -125px;
    }

    .blog-page-section {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .blog-page-item .blog-page-content {
        padding-top: 20px;
    }

    .contact-info-area {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .contact-info-box .icon h3 {
        font-size: 20px;
    }

    .contact-form {
        padding: 30px 0px 80px;
    }

    .contact-form h3 {
        font-size: 40px;
    }


    .arlo_tm_about {
        padding-top: 30px;
        margin-bottom: 40px;
    }

    .arlo_tm_about .about_inner {
        padding-top: 0px;
    }

    .resume-section .col-block.experience {
        margin-left: 0px;
    }

    .resume-section .col-title {
        margin-top: 30px;
    }
    .resume-section .col-block.education {
        margin-right: 0px;
    }

    .lightbox-wrapper .lightbox-content .section-heading.page-heading {
        margin-bottom: -40px;
    }

    .sec-p100-bg-bs {
        padding: 30px;
    }

    .sec-p100-bg-bs p {
        margin: 0px;
        padding: 0px;
    }

    #graphicdesign, #photography, #technology, #design, #webdevelopment, #application {
        padding: 30px 30px;
    }

    .single_experties {
        margin-bottom: 25px !important;
    }

    .skilled-tittle, .progress {
        width: 100%;
    }

    .experience-left {
        padding: 0px 0px;
    }

    .experience-left .experience-left-item-area {
        padding: 30px 30px;
    }

    h2.title {
        font-size: 16px;
        text-align: left;
    }

    .experience-left .experience-item .post-mate {
        margin-top: -25px;
    }

    .experience-right {
        margin-top: 30px;
    }

    .experience-right .achivement {
        padding: 30px;
    }


    .heading-main {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .contact-section.modern .ord-xl-1 {
        order: 1;
        padding-bottom: 30px;
    }

    .contact-title {
        margin-top: -40px;
    }

    .contact-info ul {
        padding-left: 0px;
    }





}

/** ===========================================

        @media (min-width: 478px) and (max-width: 640px)

=============================================**/

@media (min-width: 478px) and (max-width: 640px) {

    .feature-section {
        padding: 80px 0px;
    }

    .sec-title h2 {
        font-size: 40px;
    }
    .htc__subscribe__area {
        margin-top: -50px;
    }
    .htc__subscribe__inner h2 {
        color: #343434!important;
        font-size: 30px!important;
    }
    .newsletter__form .input__box input[type="email"] {
        width: 340px!important;
    }
    .newsletter__form .input__box button {
        width: 80px!important;
        font-size: 14px!important;
    }

    .ml-70 {
        margin-left: 0px!important;
        margin-top: 30px;
    }
    .footer-top .appointment-widget {
        margin-top: 20px;
    }

    .footer-top {
        padding-bottom: 20px;
    }

    .footer-botton .copyright p {
        line-height: 30px
    }

    .pull-right {
        padding-top: 0px;
    }

    .ptb-100 {
        padding-top: 30px;
    }

    .services-details-info  {
        padding-left: 0px;
    }

    .about-style-two {
        padding-top: 30px;
    }

    .about-style-two .image_block_3 .image-box {
        margin-left: 0px;
        margin-top: 30px;
    }

    .image_block_3 .image-box .pattern .pattern-2 {
        right: -25px;
    }

    .accordion-box .block {
        margin-left: -60px;
    }
    .faq-section {
        margin-bottom: -125px;
    }

    .blog-page-section {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .blog-page-item .blog-page-content {
        padding-top: 20px;
    }

    .contact-info-area {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .contact-info-box .icon h3 {
        font-size: 20px;
    }

    .contact-form {
        padding: 30px 0px 80px;
    }

    .contact-form h3 {
        font-size: 40px;
    }


    .arlo_tm_about {
        padding-top: 30px;
        margin-bottom: 40px;
    }
    .arlo_tm_about .about_inner {
        padding-top: 0px;
    }

    .resume-section .col-block.experience {
        margin-left: 0px;
    }

    .resume-section .col-title {
        margin-top: 30px;
    }
    .resume-section .col-block.education {
        margin-right: 0px;
    }

    .lightbox-wrapper .lightbox-content .section-heading.page-heading {
        margin-bottom: -40px;
    }

    .sec-p100-bg-bs {
        padding: 30px;
    }

    .sec-p100-bg-bs p {
        margin: 0px;
        padding: 0px;
    }

    #graphicdesign, #photography, #technology, #design, #webdevelopment, #application {
        padding: 30px 30px;
    }

    .single_experties {
        margin-bottom: 25px !important;
    }

    .skilled-tittle, .progress {
        width: 100%;
    }

    .experience-left {
        padding: 0px 0px;
    }

    .experience-left .experience-left-item-area {
        padding: 30px 30px;
    }

    h2.title {
        font-size: 16px;
        text-align: left;
    }

    .experience-left .experience-item .post-mate {
        margin-top: -25px;
    }

    .experience-right {
        margin-top: 30px;
    }

    .experience-right .achivement {
        padding: 30px;
    }

    .heading-main {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .contact-section.modern .ord-xl-1 {
        order: 1;
        padding-bottom: 30px;
    }

    .contact-title {
        margin-top: -40px;
    }

    .contact-info ul {
        padding-left: 0px;
    }





}

/** ===========================================

        @media (min-width : 320px) and (max-width: 478px)

=============================================**/

@media (min-width : 320px) and (max-width: 478px)  {

    .sec-title h2 {
        font-size: 40px;
    }

    .feature-section {
        padding: 80px 0px;
    }

    .htc__subscribe__area {
        margin-top: -50px;
    }
    .htc__subscribe__inner h2 {
        color: #343434!important;
        font-size: 30px!important;
    }

    .newsletter__form .input__box input[type="email"] {
        width: 340px!important;
    }
    .newsletter__form .input__box button {
        width: 80px!important;
        font-size: 14px!important;
    }

    .ml-70 {
        margin-left: 0px!important;
        margin-top: 30px;
    }

    .footer-top .appointment-widget {
        margin-top: 20px;
    }

    .footer-top {
        padding-bottom: 20px;
    }

    .footer-botton .copyright p {
        line-height: 30px
    }

    .pull-right {
        padding-top: 0px;
    }

    .ptb-100 {
        padding-top: 30px;
    }

    .services-details-info  {
        padding-left: 0px;
    }

    .about-style-two {
        padding-top: 30px;
    }

    .about-style-two .image_block_3 .image-box {
        margin-left: 0px;
        margin-top: 30px;
    }

    .image_block_3 .image-box .pattern .pattern-2 {
        right: -25px;
    }

    .accordion-box .block {
        margin-left: -60px;
    }

    .faq-section {
        margin-bottom: -125px;
    }

    .blog-page-section {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .blog-page-item .blog-page-content {
        padding-top: 20px;
    }

    .contact-info-box .icon h3 {
        font-size: 20px;
    }

    .contact-info-area {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .contact-form {
        padding: 30px 0px 80px;
    }

    .contact-form h3 {
        font-size: 40px;
    }

    .arlo_tm_about {
        padding-top: 30px;
        margin-bottom: 40px;
    }

    .arlo_tm_about .about_inner {
        padding-top: 0px;
    }

    .resume-section .col-block.experience {
        margin-left: 0px;
    }

    .resume-section .col-title {
        margin-top: 30px;
    }

    .resume-section .col-block.education {
        margin-right: 0px;
    }

    .lightbox-wrapper .lightbox-content .section-heading.page-heading {
        margin-bottom: -40px;
    }



    .sec-p100-bg-bs {
        padding: 30px;
    }

    .sec-p100-bg-bs p {
        margin: 0px;
        padding: 0px;
    }

    #graphicdesign, #photography, #technology, #design, #webdevelopment, #application {
        padding: 30px 30px;
    }

    .single_experties {
        margin-bottom: 25px !important;
    }

    .skilled-tittle, .progress {
        width: 100%;
    }


    .experience-left {
        padding: 0px 0px;
    }

    .experience-left .experience-left-item-area {
        padding: 30px 30px;
    }

    h2.title {
        font-size: 16px;
        text-align: left;
    }

    .experience-left .experience-item .post-mate {
        margin-top: -25px;
    }

    .experience-right {
        margin-top: 30px;
    }

    .experience-right .achivement {
        padding: 30px;
    }


    .heading-main {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .contact-section.modern .ord-xl-1 {
        order: 1;
        padding-bottom: 30px;
    }

    .contact-title {
        margin-top: -40px;
    }

    .contact-info ul {
        padding-left: 0px;
    }


}


@media (max-width: 1040px){

    .arlo_tm_about .about_inner {
        flex-direction: column;
    }
    .arlo_tm_about .left {
        width: 100%;
        margin-bottom: 70px;
    }

    .arlo_tm_about .right {
        width: 100%;
        padding-left: 0;
    }
    .arlo_tm_about .about_short_contact_wrap ul {
        padding-left: 0px;
    }
    .arlo_tm_about .about_short_contact_wrap ul li {
        width: 100%;
    }


    .htc__appoinment__area {
        margin-top: -70px;
        padding-bottom: 0px;
    }

    .htc__appoinment__area .section__title h2 {
        line-height: 40px;
    }


    .art-preloader .art-preloader-content {
        left: 20px;
    }
   .art-preloader .art-preloader-content .art-preloader-load {
        left: 30px;
    }



}