@media screen and (max-width: 768px) {
    .layout-container {
        width: auto;
    }

    header[role="banner"]>div {
        /*display: none;*/
    }

    .content-left-right-spacing {
        padding: 10px 30px;
        overflow: hidden;
    }

    .hero-section-block__content {
        padding: 10px 0px;
        display: block;
    }

    .hero_section_left_content_container {
        width: 100%;
        margin-top: 30px;
        padding: 5px 0px;
    }

    .hero_section_left_content_container .field--type-text-with-summary {}

    .hero_section_left_content_container p:nth-child(1) span {
        font-size: clamp(12px, 2.3vw, 16px);
        display: inline-flex;
    }


    .hero_section_left_content_container p:nth-child(2) span {
        font-size: clamp(40px, 6vw, 72px);
        line-height: 120%;
    }

    .hero_section_left_content_container p:nth-child(3) span {
        font-size: clamp(16px, 2.3vw, 20px);
    }

    .hero_section_right_content_container {
        margin-bottom: 30px;
        width: 100%;
    }

    /* SEARCH FORM */
    .search_form_container_hero input {
        padding: 14px 20px 14px 48px;
        width: 50%;
        font-size: 15px;
    }

    .search_form_container_hero button {}

    /* FORM STACK INTO SINGLE COLUMN */
    .fieldset-wrapper,
    .form-item--first-name,
    .form-item--last-name,
    .js-form-item-email-address,
    .js-form-item-phone-number,
    .js-form-item-date,
    .js-form-item-time {
        width: 100% !important;
        float: none;
    }

    .fieldset-wrapper {
        flex-direction: column;
        gap: 0;
    }

    .webform_container_schedule_a_call_with_me input#edit-actions-submit {
        width: 100%;
        float: none;
        background-position: right 20px center;
    }

    .hero_section_right_content_container .webform_container_schedule_a_call_with_me {
        border-radius: 16px;
        width: 100%;
    }

    /* Tabs start */
    .paragraph--type--multiple-repeater-tabs .paragraph--type--tabs {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 10px;
    }

    /* Tabs end */
    .paragraph--type--portfolio-repeater .paragraph--type--portfolio-single-backend-use.last-row-item {
        margin-right: 3%;
    }

    .paragraph--type--portfolio-repeater .immediate-parent {
        flex: 0 0 calc(100% - 30px);
    }

    /* Left content right image */
    .paragraph--type--left-content-right-image-layout .content-left-right-spacing .left_area_container,
    .paragraph--type--left-content-right-image-about-d .content-left-right-spacing .left_content_about_area {
        flex: 0 0 calc(100% - 0px);
    }

    .paragraph--type--right-content-left-image-about-d .content-left-right-spacing .left_image_about_design {
        flex: 0 0 calc(100% - 0px);
        order: 2;
    }


    .paragraph--type--left-content-right-image-layout .content-left-right-spacing .right_area_container,
    .paragraph--type--left-content-right-image-about-d .content-left-right-spacing .right_image_about_area,
    .paragraph--type--right-content-left-image-about-d .content-left-right-spacing .right_content_about_design_cont,
    .paragraph--type--right-content-left-image-about-d .content-left-right-spacing .right_content_about_design‎_cont {
        flex: 0 0 calc(100% - 0px);
        height: 100%;
    }

    .paragraph--type--right-content-left-image-about-d .field--name-field-content-area-about-design {
        margin-top: 150px;
    }

    .paragraph--type--left-content-right-image-about-d .content-left-right-spacing,
    .paragraph--type--right-content-left-image-about-d .content-left-right-spacing {
        padding-left: 0px;
        padding-right: 0px;
    }

    .paragraph--type--left-content-right-image-about-d .field--name-field-about-right-image,
    .paragraph--type--right-content-left-image-about-d .field--name-field-left-image-about-design {
        margin: 20px;
    }

    /* Left content right image */

    /* Left image right content START  */
    .paragraph--type--left-image-right-content-layout .content-left-right-spacing .left_area_container {
        flex: 0 0 calc(100% - 0px);
        order: 2;

    }

    .paragraph--type--left-image-right-content-layout .content-left-right-spacing .right_area_container {
        flex: 0 0 calc(100% - 0px);
    }

    .paragraph--type--left-content-right-image-layout .content-left-right-spacing .right_area_container .field--name-field-right-image img,
    .paragraph--type--left-image-right-content-layout .content-left-right-spacing .left_area_container .field--name-field-left-image img {
        height: auto;
    }

    /* Left image right content END */

    /* Testimonials start */
    .views-row-first .views-field-title span.field-content a {
        left: unset;
    }

    .views-field-field-testimonial-category .field-content {
        float: unset;
        right: unset;
        position: relative;
        bottom: -6px;
        z-index: 50;
    }

    /* Testimonials end */
    .paragraph--type--footer-contact-block .content-left-right-spacing {
        overflow: unset;
    }

    .paragraph--type--footer-contact-block .field--name-field-contact-heading {
        font-size: 28px;
    }

    .paragraph--type--footer-contact-block {
        padding-top: 28px;
        margin-left: 20px;
        margin-right: 20px;
    }

    footer .region-footer .footer-bottom-wrapper {
        display: grid;
    }

    .footer-bottom-wrapper .footer-bottom-right {
        margin-top: 20px;
    }

    .vocabulary-technology-type .field--name-description p {
        font-size: 20px;
        padding: 30px;
    }

    .block-views-blockterm-nodes-block-block-1 .views-field-view-node a {
        width: 90%;
    }

    h1 {
        font-size: 36px;
    }

    .h2_global_heading {
        font-size: 34px;
    }

    #block-hati-proj-theme-mainnavigation {
        order: 3;
    }

    #block-hati-proj-theme-mobilemenutogglecode {
        order: 2;
    }
    #block-hati-proj-theme-seeourworkheader {
       display: block ruby;  
    }

    .region-header .field--type-text-with-summary a span {
        color: #412A78;
        padding: 14px 46px 14px 5px;
        border: 1.5px solid #412A78;
    }

    .paragraph--type--left-content-right-image-about-d {
        margin-bottom: 10px;
    }

    .footer .region-footer {
        display: flex;
        flex-wrap: wrap;
        column-gap: 60px;
        padding-top: 49px;
        padding-bottom: 20px;
    }

}

@media screen and (min-width: 769px) and (max-width: 1050px) {




    .hero-section-block__content {}

    .hero_section_left_content_container {}

    .hero_section_left_content_container .field--type-text-with-summary {}

    .hero_section_left_content_container p:nth-child(1) span {
        font-size: clamp(12px, 2.3vw, 16px);
        display: inline-flex;
    }


    .hero_section_left_content_container p:nth-child(2) span {
        font-size: clamp(40px, 6vw, 72px);
        line-height: 120%;
    }

    .hero_section_left_content_container p:nth-child(3) span {
        font-size: clamp(16px, 2.3vw, 20px);
    }

    .search_form_container_hero {
        width: 100%;
    }

    .search_form_container_hero input {
        padding: 14px 20px 14px 48px;
        width: 70%;
        font-size: 15px;
    }

    @media (min-width: 577px) {
    .user-login-form {
        max-width: 480px;
        margin: 40px auto;
        padding: 24px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    }

    .user-login-form .form-submit {
        width: 100%;
        height: 46px;
    }
}


}

@media screen and (max-width: 850px) {

    .view-portfolio.view-display-id-page_1 .views-view-responsive-grid__item,
    .view-portfolio.view-display-id-page-1 .views-view-responsive-grid__item,
    .view-portfolio.view-display-id-block_1 .views-view-responsive-grid__item {
        display: block;
        width: 100%;
        margin-bottom: 22px;
    }

    .views-view-responsive-grid--horizontal,
    .views-view-responsive-grid {
        display: block;
        width: 100%;
    }

    .view-portfolio.view-display-id-page_1.content-left-right-spacing,
    .view-portfolio.view-display-id-page-1.content-left-right-spacing,
    .view-portfolio.view-display-id-block_1.content-left-right-spacing {
        overflow: visible;
    }

    .paragraph--type--packages-backend {
        width: 100%;
        margin-right: 0%;
    }

    /* testimonials resposive  start */

    .block-views-blocktestimonials-block-1 #tns1>.tns-item {
        width: calc(99%);
        display: block;
    }

    .block-views-blocktestimonials-block-1 .tns-outer .tns-nav {
        display: none;
    }

    .block-views-blocktestimonials-block-1 #tns1 {
        width: 100%;
    }

    /* testimonials resposive  end */


    /* Every Moment Count start */

    .block-views-blockgallery-block-block-1 #tns1>.tns-item {
        width: calc(99%);
        display: block;
    }

    .block-views-blockgallery-block-block-1 #tns1 {
        width: 100%;
        transform: unset !important;
    }

    .block-views-blockgallery-block-block-1 .tns-nav {
        display: none;
    }


    /* Every Moment Count start */


}

@media (min-width: 1135px) {

  footer .region-footer > div,
  footer .region-footer > nav {
    flex: 1 1 0;
    min-width: 200px;
    column-gap: 30px;
  }
}


@media screen and (max-width: 1200px) {
    .contact-phone-email-website-layer {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .contact-phone-email-website-layer .item {
        margin-right: 20px;
    }

    /* header menu START */
    header.content-left-right-spacing {
        padding-left: 20px;
        padding-right: 20px;
    }

    header[role="banner"] nav ul li {
        padding-left: 0px;
    }

    /* header menu END */
}


@media screen and (max-width: 1350px) {
    .field--name-field-benefit-layout-repeater {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 22px;
        padding-bottom: 33px;
    }

    .paragraph--type--our-clients .field--name-field-client-logo {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 62px;

    }

    .paragraph--type--our-clients .field--name-field-client-logo .field__item img {
        width: 100%;
    }


}

@media screen and (max-width: 1240px) {}



/* mobile menu special query START */
@media screen and (max-width: 979px) {
    .mega-mobile-menu-container .mega-mobile-menu {
        display: flex;
    }

    header[role="banner"] nav ul {
        display: none;
        position: absolute;
        width: 100%;
        z-index: 9999999;
        left: 0;
        text-align: left;
        padding: 20px;
        margin-top: 41px;
        background: linear-gradient(180deg, #D3CDF9 0%, #E0DBFB 20%, #F0F1F3 100%, #FFF 100%);
    }

    header[role="banner"] nav ul li a {
        line-height: 50px;
    }

    header[role="banner"] nav ul li a:hover {
        background: unset;
        color: unset;
    }

    header[role="banner"] nav ul li.menu-item--expanded a {
        background: url(../images/menu-dropdown-right-face.png) no-repeat right 2px bottom 17px;
    }

    header[role="banner"] nav ul li.menu-item--expanded a:hover {
        color: unset;
        background: url(../images/menu-dropdown-right-face.png) no-repeat right 2px bottom 17px;
    }

    header[role="banner"] nav ul ul {
        background: linear-gradient(180deg, #D3CDF9 0%, #E0DBFB 20%, #F0F1F3 100%, #FFF 100%);
        border-radius: 0px;
        border: none;
        top: 0px;
        margin-top: 0px;
    }

    header[role="banner"] nav ul ul li a {
        padding-bottom: 0px;
        padding-top: 0px;
        font-weight: normal;
    }

    header[role="banner"] nav ul ul li.go-back {
        border-bottom: 1px solid;
        float: left;
        width: 90%;
        display: block;
        padding-bottom: 5px;
        margin-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }

    header[role="banner"] nav ul li.menu-item--expanded ul li.go-back a {
        background: none !important;
    }

    header[role="banner"] nav ul li.menu-item--expanded ul li,
    header[role="banner"] nav ul li.menu-item--expanded ul li:hover,
    header[role="banner"] nav ul li.menu-item--expanded ul li a,
    header[role="banner"] nav ul li.menu-item--expanded ul li a:hover {
        background: none !important;
    }


}

/* mobile menu special query END */


/* mobile only START */
@media screen and (max-width: 576px) {

    /* Website User Login START */

        .user-login-form {
        max-width: 480px;
        margin: 20px auto;
        background: #fff;
        border-radius: 12px;
        padding: 14px;
    }

    .user-login-form input {
        height: 42px;
        font-size: 14px;
    }

    .user-login-form .form-submit {
        width: 100%;
        height: 44px;
    }

    /* Website User Login END */


    .contact-phone-email-website-layer .item {
        margin-right: 0px;
        white-space: wrap;
        text-align: center;
        font-size: 16px;
    }

    .region-header .field--type-text-with-summary a span {
        color: #412A78;
        padding: 14px 46px 14px 5px;
        border: 1.5px solid #412A78;
    }

    header.content-left-right-spacing {
        padding-left: 10px;
        padding-right: 10px;
    }

    #block-hati-proj-theme-mainnavigation {
        order: 3;
    }

    #block-hati-proj-theme-mobilemenutogglecode {
        order: 2;
    }
    #block-hati-proj-theme-seeourworkheader {
       display: none;  
    }
    .view-id-dynamic_h1_node_title .dynamic-h1-with-bg img,
    .block-views-blockterm-name-block-1 .dynamic-h1-with-bg img{
       /* max-height: unset;
        height: 29vh;
        width: auto;*/
    }

    /* About us page left content right image section START */

    .paragraph--type--left-content-right-image-about-d .field--name-field-content-area {
        margin-right: 20px;
    }

    .paragraph--type--right-content-left-image-about-d .field--name-field-content-area-about-design {
        margin-left: 20px;
    }

    /* About us page left content right image section END */

    .view-gallery-block.view-display-id-block_1 .tns-inner .tns-item.tns-slide-cloned {
        display: none !important;
    }




}

/* mobile only START */