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

@media screen and (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media screen and (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media screen and (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }

}

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

    .circle-green {
        display: inline-block;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        box-shadow: 0px 0px 1px 1px #0000001a;
        position: relative;
    }

    .circle-blue {
        display: inline-block;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        box-shadow: 0px 0px 1px 1px #0000001a;
        position: relative;
    }

    .circle-red {
        display: inline-block;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        box-shadow: 0px 0px 1px 1px #0000001a;
        position: relative;
    }

    .circle-green-title {
        position: absolute;
        top: 47%;
        left: 27%;
        font-size: 13px;
    }

    .circle-blue-title {
        position: absolute;
        top: 45%;
        left: 20%;
        font-size: 12px;
    }

    .circle-red-title {
        position: absolute;
        top: 45%;
        left: 23%;
    }

    .services-infographic_title {
        line-height: 33px;
        margin-bottom: -30px;
    }

    .quality__tab {
        min-width: 45vw;
    }
}

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

    .circle-green {
        display: inline-block;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        box-shadow: 0px 0px 1px 1px #0000001a;
        position: relative;
    }

    .circle-blue {
        display: inline-block;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        box-shadow: 0px 0px 1px 1px #0000001a;
        position: relative;
    }

    .circle-red {
        display: inline-block;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        box-shadow: 0px 0px 1px 1px #0000001a;
        position: relative;
    }

    .circle-green-title {
        position: absolute;
        top: 47%;
        left: 20%;
        font-size: 13px;
    }

    .circle-blue-title {
        position: absolute;
        top: 45%;
        left: 10%;
        font-size: 12px;
    }

    .circle-red-title {
        position: absolute;
        top: 45%;
        left: 20%;
    }

    .services-infographic_title {
        line-height: 33px;
        margin-bottom: -30px;
    }

    .paradox__content {
        flex-direction: column-reverse;
    }

    .paradox__information {
        gap: 16px;
        width: 100%;
    }

    .paradox__image {
        width: 100%;
    }
}

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

    .touch {
        padding: 48px 16px;
    }

    .touch__content {
        gap: 24px;
    }

    .touch__overlay {
        background: rgba(25, 25, 25, 0.6);
    }

    .touch__accent {
        position: absolute;
        top: 0;
        left: 0;
        width: 24px;
        height: 24px;
    }

    .touch__heading {
        padding-left: 24px;
        padding-top: 24px;
    }

    .touch__title {
        font-size: 24px;
        line-height: 28px;
    }

    .touch__card-title {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 0;
    }

    .touch__card {
        gap: 40px;
    }

    .touch__form form {
        gap: 20px;
    }

    .touch__form .wpcf7-list-item-label {
        font-size: 12px;
        line-height: 16px;
        margin-left: 8px;
    }

    .section-projects_title {
        font-size: 24px;
        line-height: 150%;
    }

    .section-projects-map_info {
        display: none;
        position: relative;
        box-sizing: border-box;
        border-radius: 2px;
        padding: 16px;
        z-index: 1;
        left: 0px;
        bottom: 0px;
        min-width: 240px;
        margin: 0 20px;
        top: 10px;
    }

    /* Main */

    #primary-menu {
        display: none;
    }

    .menu-desktop {
        display: none;
    }

    .menu-mobile {
        display: flex !important;
    }

    .slide-section_title {
        font-size: 20px;
        line-height: 32px;
        bottom: 120px;
        height: 120px;
    }

    .slide-section_title::before {
        width: 24px;
        height: 24px;
        bottom: -7px;
        left: -26px;
    }

    #pp-nav.right {
        right: 20px;
    }

    .show-scroll {
        display: none;
    }

    .menu ul a {
        font-size: 24px;
        line-height: 100%;
        margin-bottom: 32px;
    }

    .menu .current-menu-item a {
        color: #00AB97;
    }

    /* Contacts */
    .contact-page_title {
        font-size: 24px;
        line-height: 24px;
        margin-bottom: 40px;
    }

    .contact-info_title {
        font-size: 12px;
    }

    .contact-info_info {
        font-size: 16px;
        margin-bottom: 25px;
    }

    .contact-map {
        margin-top: -25px;
    }

    /* Team */
    .team-page .row {
        padding: 0 16px;
        justify-content: space-between;
    }

    .team-page .row .mb-5 {
        width: 48%;
        padding: 0;
        margin-bottom: 24px !important;
    }

    .team-page_title {
        font-weight: 800;
        font-size: 24px;
        line-height: 24px;
        margin-bottom: 48px;
    }

    .team-page-member_photo img {
        width: 100%;
    }

    .team-page-member_name {
        font-size: 16px;
        font-style: normal;
        font-weight: 900;
        line-height: 100%;
        margin-bottom: 8px;
    }

    .team-page-member_photo {
        margin-bottom: 16px;
    }

    .team-page-member_position {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
    }

    /* Blog */
    .blog-page_title {
        font-size: 24px;
        margin-bottom: 24px;
        line-height: 150%;
    }

    .read-more_link {
        font-weight: 600;
        font-size: 12px;
        line-height: 100%;
    }

    .read-more-title {
        font-size: 16px;
        line-height: 100%;
        margin-bottom: 32px;
    }

    .blog-page {
        padding-top: 50vw;
    }

    .story-output {
        padding: 36px 16px;
    }

    .more-stories {
        padding-top: 0;
    }

    .more-stories_title {
        margin-top: 32px;
        margin-bottom: 16px;
    }

    .single .blog-page {
        padding-top: 80vw;
        padding-bottom: 60vw;
    }

    .single .blog-stories .col-md-4 {
        margin-bottom: 20px;
    }

    .blog-story {
        height: 100%;
        background-position: center;
    }

    .blog-story_title {
        font-size: 16px;
        line-height: 150%;
        padding: 120px 16px 25px;
    }

    .home .blog-story_title {
        padding: 20vw 3vw 3vw;
        height: max-content;
        margin-bottom: 0;
    }

    /* Post */
    .single-story h2 {
        font-size: 20px;
        line-height: 100%;
        margin-bottom: 16px;
    }

    .single-story p {
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 48px;
    }

    /* Sectors */
    .sectors-page_title {
        font-size: 24px;
        line-height: 36px;
        margin-bottom: 250px;
    }

    .sectors-page_item__icon {
        width: 56px;
        height: 56px;
    }

    .sectors-page_item__icon img {
        width: 30px;
        height: 30px;
    }

    .sectors-page_item__title {
        font-size: 20px;
        line-height: 1.3;
    }

    .sectors-page_item__description {
        font-weight: 300;
        font-size: 14px;
        line-height: 150%;
        margin-bottom: 56px;
    }

    /* Services */

    .services-slide-section {
        min-height: inherit;
        height: 55vh;
    }

    .services-slide-section .h-100 {
        height: initial !important;
    }

    .services-slide-section_title {
        margin-top: 20vh;
        font-size: 24px;
        font-style: normal;
        font-weight: 900;
        line-height: 32px;
        letter-spacing: 1px;
        margin-left: 0;
    }

    .services-slide-section_title br {
        display: none;
    }

    .services-slide-section_title::before {
        content: initial;
        width: 24px;
        height: 24px;
    }

    .services-infographic_title {
        font-weight: 900;
        font-size: 20px;
        line-height: 32px;
        margin-bottom: 0px;
    }

    .services-infographic {
        padding: 10px 0 60px;
    }

    .paradox {
        padding: 48px 0;
    }

    .paradox__content {
        gap: 24px;
    }

    .paradox__information {
        gap: 16px;
    }

    .paradox__description {
        gap: 16px;
    }

    .paradox__facts {
        flex-direction: column;
    }

    .paradox__fact {
        width: 100%;
    }

    .paradox__image {
        object-fit: cover;
        height: 400px;
    }

    .services-sortlist {
        padding: 32px 0;
    }

    .quality {
        padding: 48px 0 0 !important;
    }

    .quality__title {
        font-size: 20px;
        line-height: 28px;
        text-align: left;
        padding: 0 16px;
        margin-bottom: 24px;
    }

    /* Mobile: stack vertically, image panel hidden, tabs become swipeable cards */
    .quality__panel {
        flex-direction: column;
    }

    .quality__image-panel {
        display: none;
    }

    .quality__tabs {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* hide scrollbar */
        scrollbar-width: none;
    }

    .quality__tabs::-webkit-scrollbar {
        display: none;
    }

    /* Each tab becomes a full photo card */
    .quality__tab {
        width: 82vw;
        height: 100%;
        background-image: var(--tab-bg);
        background-size: cover;
        background-position: center;
        border: none;
        border-right: 1px solid rgba(255, 255, 255, 0.15);
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        scroll-snap-align: start;
        flex-shrink: 0;
        position: relative;
    }

    .quality__tab:hover,
    .quality__tab.is-active {
        background: var(--tab-bg);
        background-size: cover;
        background-position: center;
    }

    /* Base tint — always on */
    .quality__tab::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(25, 25, 25, 0.28);
        pointer-events: none;
        z-index: 0;
    }

    /* Heavy gradient — fades in when active */
    .quality__tab::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            linear-gradient(0deg, rgba(25, 25, 25, 0.24) 0%, rgba(25, 25, 25, 0.24) 100%),
            linear-gradient(180deg, rgba(25, 25, 25, 0.00) 48.33%, rgba(25, 25, 25, 0.90) 85.26%);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
        z-index: 0;
    }

    .quality__tab.is-active::after {
        opacity: 1;
    }

    .quality__tab-inner {
        position: relative;
        z-index: 1;
        padding: 24px;
    }

    .quality__tab-title {
        color: #fff !important;
        font-size: 18px;
    }

    /* Body slides up on is-active — same as desktop, no !important override */
    .quality__tab-body {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
    }

    .quality__tab.is-active .quality__tab-body {
        max-height: 300px;
        opacity: 1;
        margin-top: 12px;
    }

    .touch__content {
        flex-direction: column;
        align-items: stretch;
    }

    .touch__heading {
        padding-bottom: 0;
    }

    .touch__card {
        width: 100%;
        padding: 32px 24px;
    }

    .touch__form .contact__input--small {
        width: 100%;
    }

    .sort-buttons {
        padding-top: 0;
        display: flex;
        margin-bottom: 32px;
        overflow-x: scroll;
    }

    .sort-button {
        margin-bottom: 10px;
        white-space: nowrap;
    }

    .section-projects-map {
        padding-top: 84px;
    }

    .section-projects-slides {
        padding: 20px 0 72px;
    }

    .project-slide-overlay-1,
    .project-slide-overlay-2,
    .project-slide-overlay-3,
    .project-slide-overlay-4 {
        opacity: 1;
    }

    .project-subtitle {
        color: #FFFFFF;
    }

    .project-description {
        display: block;
        padding: 0 15px;
    }

    .project-logos {
        display: flex;
    }

    .project-logos {
        display: flex;
    }

    .services-page {
        background-size: auto 120% !important;
        background-position: 80% 40% !important;
    }

    .center {
        overflow-x: initial;
    }

    .center-bg img {
        max-width: none;
        height: 470px;
    }

    .wrapper-overflow {
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .center {
        width: auto;
        height: 490px;
        white-space: nowrap;
        display: block;
    }


    .circle-green {
        display: inline-block;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        box-shadow: 0px 0px 1px 1px #0000001a;
        top: 140px !important;
        left: 31%;
        position: relative;
    }

    .circle-blue {
        display: inline-block;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        box-shadow: 0px 0px 1px 1px #0000001a;
        top: 50px !important;
        left: 69%;
        position: relative;
    }

    .circle-red {
        display: inline-block;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        box-shadow: 0px 0px 1px 1px #0000001a;
        top: 20px !important;
        left: 100%;
        position: relative;
    }

    ::-webkit-scrollbar {
        height: 4px;
        /* height of horizontal scrollbar ← You're missing this */
        width: 4px;
        /* width of vertical scrollbar */
    }

    .circle-green-title {
        position: absolute;
        top: 47%;
        left: 20%;
        font-size: 13px;
    }

    .circle-blue-title {
        position: absolute;
        top: 45%;
        left: 10%;
        font-size: 12px;
    }

    .circle-red-title {
        position: absolute;
        top: 45%;
        left: 20%;
    }

    .projects-scroll {
        display: none !important;
    }

    .sectors-page {
        padding-top: 170px;
        background-size: 300% auto;
        background-position: 80% 0%;
    }

    .footer #primary-menu {
        display: flex;
    }

    .project-title {
        color: #fff;
    }


    .type-services .content .wrap {
        font-size: 14px;
        padding: 48px 0 0;
    }

    .type-services .content h2 {
        margin: 24px 0 12px;
        font-size: 26px;
    }

    .type-services .content h3 {
        margin: 24px 0 12px;
        font-size: 22px;
    }

    .type-services .content h4 {
        margin: 24px 0 12px;
        font-size: 18px;
    }

    .type-services .content h5 {
        margin: 24px 0 12px;
        font-size: 16px;
    }

    .type-services .content h6 {
        margin: 24px 0 12px;
        font-size: 14px;
    }

    .type-services .hero h1 {
        margin-top: 125px;
        font-size: 24px;
        font-style: normal;
        font-weight: 900;
        line-height: 28px;
    }

    .type-services .hero h1::before {
        width: 20px;
        height: 20px;
        background: #00AB96;
        left: -25px;
    }

    .contact-info_info, .contact-info_info a {
        font-size: 6.5vw !important; 
    }

    .contact-email::after {
        margin-left: 2vw;
    }

    .contact-email:hover::after {
        margin-left: 4vw;
    }

    .contact-map img {
        top: 68%;
    }

    .project-slide {
        width: 86.5vw !important;
    }

    .slick-list {
        overflow: visible;
    }
}