@media (min-width: 1200px) {.logo-item img {
    max-width: 100px !important;
}
}

@media (max-width: 1280px) {

    .container {
        max-width: 100%;
    }

    .hero-wrapper .container2 {
        padding: 0 20px !important;
    }

    .industries {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1560px) {

  .hero-wrapper  {        max-width: 1170px;}
}

@media (max-width: 1200px) {



    .counter-item-large {
        height: 280px;
    }

    .modal-container {
        padding: 20px;
    }

    .modal-title {
        font-size: 30px;
    }

    .contact-form {
        gap: 20px;
        margin-top: 20px;
    }
.contact-form .wpcf7-form{
        gap: 20px;
        margin-top: 20px;
    }

    .contact-form-input.inline {
        gap: 20px;
    }

    .contact-form-input input,
    .contact-form-input select {
        font-size: 18px;
    }

    .contact-form-submit {
        margin-top: 0;
        display: flex;
        gap: 10px;
    }

    .contact-form-submit button {
        font-size: 18px;
    }

    .contact-form-notice {
        margin-top: 0;
        font-size: 14px;
    }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .expertise-item {
        width: 48%;
    }
}

@media (max-width: 1024px) {

  .expertise-img {
    display: flex
;
    border-radius: 0 0 10px 10px;
}

.expertise-title {

    border-radius: 10px 10px 0 0;
}

  .tab {

    width: max-content;
}

  .contact-form .wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 1em;
    font-weight: normal;
    display: block;
    position: absolute;
    margin-left: 21px;
    margin-top: 2px;
    font-size: 11px;
}

  .case-img img {
    object-fit: cover;
height: 185px;
    width: 100%;
}

    h2,
    .h2 {
        font-weight: 400;
    }

    .container {
        padding: 0 20px !important;
    }

    .section-title {
        width: 100%;
    }

    .slider-item {
        min-height: 162px;
    }

    .slider-vertical {
        height: 360px;
    }

    .features-blocks {
        flex-direction: column-reverse;
    }

    .features-blocks .left-block,
    .features-blocks .right-block {
        width: 100%;
    }

    .features-blocks .left-block {
        margin-top: 60px;
    }

    .features {
        margin-top: 30px;
    }

    .feature-item {
        min-width: calc(50% - 10px);
    }

    .feature-description {
        font-size: 18px;
    }

    .counter-item-large {
        height: 250px;
    }

    .counter-description {
        font-size: 20px;
    }

    .expertise-item {
        width: 48%;
    }

    .expertise-title {
        min-height: 100px;
    }

    .cta-blocks {
        flex-direction: column;
        gap: 30px;
    }

    .cta-description {
        width: 100%;
    }

    .cta-button {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
}

@media (max-width: 950px) {

  .gal3 {    display: grid
  ;
      grid-template-columns: repeat(1, 1fr);
      grid-gap: 10px;}
  .gal2 {    display: grid
  ;
      grid-template-columns: repeat(1, 1fr);
      grid-gap: 10px;}

    .industries {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 840px) {


  .logo-item img {
  max-width: 70px;
  }


  .expertise-img img {    height: 237px;
      object-fit: cover;}

    /**** COUNTERS ****/

    .counter-description {
        max-width: 154px;
        font-size: 20px;
    }

    .counter-item-large {
        height: 358px;
    }
}

@media (max-width: 820px) {

    .possibilities-slider-gradient {
        height: 40px;
    }
}

@media (max-width: 768px) {

  #cta .h2 {text-align: left}
  #counters .h2 {text-align: left}
  #possibilities .h2 {text-align: left}
  #possibilities .possibilities-button {
        display: inline-block;}

        #cta {
    padding-top: 20px;
    padding-bottom: 70px;
}

        .counter-description {

    width: 74%;
}

    h1,
    .h1 {
        font-size: 32px;

    }

    h2,
    .h2 {
        font-size: 30px;
    }

    h3,
    .h3 {
        font-size: 24px;
    }

    .p1 {
        font-size: 14px;
    }

    .button-light {
        font-size: 14px;
    }

    .d-none {
        display: none;
    }

    .container {
        max-width: 100%;
        padding: 0 20px;
    }

    .button-gradient {
        font-size: 12px;
    }

    /**** HEADER ****/

    .header-inner {
        flex-direction: row-reverse;
    }

    .header__nav {
        display: flex;
        align-items: center;
        flex: inherit;
    }

    .nav__menu {
        display: none;
    }

    .overlay.shown {
        position: fixed;
        display: flex;
        padding-top: 50px;
        overflow-y: auto;
        inset: 0;
        background-color: rgba(41, 41, 41, 0.6);
        transition: opacity 300ms ease-in-out;
        z-index: 3;
    }

    .burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        cursor: pointer;
    }

    .burger .line {
        width: 21px;
        height: 2px;
        background-color: var(--white);
        transition: transform 0.5s;
    }

    .burger.opened {
        width: 30px;
        height: 30px;
        background-image: url('../img/icons/close.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        transition: 0.5s ease-out;
        z-index: 9999;
        /*position: fixed;*/
        right: 30px;
        top: 20px;
    }

    .burger.opened .line {
        display: none;
    }

    .menu-right {
        position: fixed;
        top: 0;
        left: -100%;
        display: flex;
        flex-direction: column;
        width: 70%;
        height: 100vh;
        box-sizing: border-box;
        background-color: var(--third_black);
        z-index: 999;
        overflow-y: auto;
    }

    .menu-right.opened {
        display: flex;
        left: 0;
        flex-direction: column;
        justify-content: space-between;
    }

    @keyframes showNav {
        from {
            left: -100%;
        }

        to {
            left: 0;
        }
    }

    .show-nav {
        animation: showNav 0.5s ease forwards;
    }

    @keyframes hideNav {
        from {
            left: 0;
        }

        to {
            left: -100%;
        }
    }

    .hide-nav {
        animation: hideNav 0.5s ease forwards;
    }

    .header-container .menu-right nav {
        display: block;
    }

    .nav-mobile {
        margin-top: 15%;
        margin-left: 50px;
    }

    ul.nav-menu {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    ul.nav-menu li {
        display: block;
        padding: 12px 20px;
        text-align: center;
    }

    ul.nav-menu li a {
        color: inherit;
        text-decoration: none;
    }

    /**** HERO ****/
    .hero-wrapper {
        padding: 20px;
       /* background-size: cover;*/
        background-position: top;
    }

    .hero-main-part {
        max-width: 608px;
        gap: 180px;
    }

    /**** SLIDER ****/



    /**** FEATURES ****/

    .features {
        margin-top: 15px;
    }

    .features-blocks .left-block {
        margin-top: 30px;
    }

    .features-inner {
        gap: 15px;
    }

    .features-inner .h1 {
        font-size: 30px;
        font-weight: 400;
    }

    .feature-title {
        font-size: 24px;
    }

    .feature-description {
        font-size: 14px;
    }

    a.feature-link {
        font-size: 14px;
    }

    .main-slider-description {
        font-size: 14px;
    }

    .main-slider-nav {
        min-height: 60px;
    }

    /**** INDUSTRIES ****/

    .industries-content {
        margin-top: 20px;
        font-size: 14px;
    }

    .industries {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }

    .industry {
        height: 56px;
        padding: 2px;
        width: 105px;
        gap: 3px;
            border-radius: 10px;
    }


    .industry-icon img {
        height: 28px;

    }

    .industry-icon {
    height: 28px;
    width: 28px;}

    .industry-title {
        font-size: 12px;

    }

    /**** POSSIBILITIES ****/

    .possibilities-slider {
        width: 33%;
    }

    .slider-vertical {
        height: 260px;
    }

    .possibilities-slide {
        height: 70px;
    }

    /**** CASES ****/

    .cases-tabs {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .case {
        gap: 20px;
        flex-wrap: wrap;
    }

    .cases-body {
        flex-direction: column;
    }

    .case-img {
        width: 100%;
    }

    .case-info {
        width: 100%;
    }

    .case-button {
        margin-top: 20px;
    }

    /**** COUNTERS ****/

    #counters {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .counter-title-span1 {
        font-size: 24px;
    }

    .counter-title-span2 {
        font-size: 24px;
    }

    .counter-title-span3 {
        font-size: 24px;
        margin-bottom: 0;
        align-self: auto;
    }

    .counter-description {
        margin-top: 30px;
        font-size: 14px;
    }

    .counter-item-large {
        height: 244px;
    }

    .counter-item-large .counter-description {
        font-size: 14px;
    }

    /**** LOGOS ****/

    .logos {
        gap: 30px;
    }

    .logo-item img {
        height: 27px;
    }

    /**** EXPERTISE ****/

    .expertise-title {
        font-size: 18px;
    }

    /**** CTA ****/

    .cta-blocks {
        flex-wrap: wrap;
        gap: 20px;
    }

    .cta-title {
        width: 100%;
        font-size: 24px;
    }

    .cta-description {
        font-size: 14px;
    }

    .cta-button {
        width: 100%;
    }


    /**** FOOTER ****/

    .footer-logo {
        width: 142px;
    }

    /**** MODAL ****/

    .modal-container {
        max-width: 350px;
        padding: 40px 20px 20px;
    }

    .modal-close {
        width: 20px;
        height: 20px;
    }

    .contact-form-input input,
    .contact-form-input textarea {
        padding: 10px 15px;
        font-size: 16px;
    }

    .contact-form-input.inline {
        display: flex;
        flex-direction: column;
    }

    .contact-form-submit button {
        max-width: 300px;
        height: 60px;
        font-size: 20px;
    }
    .contact-form-submit input {
        max-width: 300px;
        height: 60px;
        font-size: 14px;
    }

    .contact-form-submit-arrow {
        height: 60px;
        padding: 10px 20px;
        width: 120px;
        border-radius: 20px;
    }

    .contact-form-submit-arrow svg {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 730px) {
    .counter-img {
        background-size: 100px auto;
    }

    .counter-title-span2 {
        font-size: 40px;
    }

    .counter-description {
        font-size: 16px;
    }

    .counter-item-large {
        height: auto;
    }

    .footer-top {
        flex-wrap: wrap;
        gap: 20px;
    }

    .footer-left {
        width: 100%;
        justify-content: space-between;
    }

    .footer-right {
        flex-wrap: wrap;
        gap: 20px;
        width: 100%;
        justify-content: space-between;
    }

    .footer-bottom {
        flex-wrap: wrap;
        gap: 10px;
    }

    .footer-bottom>span:nth-child(1) {
        width: 100%;
        order: 3;
    }
}

@media (max-width: 650px) {
    .button {
        font-size: 12px;
        padding: 10px 15px;
    }

    .hero-wrapper {
        padding: 30px 0;
        min-height: 300px;
        background-image: url('../img/banner-mob2.jpg');
         background-size: cover;
                 background-position: center;
    }

    .hero-wrapper .container2 {
        padding: 0 !important;
        background-color: rgba(0, 0, 0, 0.6);
    }

    .hero-main-part {
        display: block;
        padding: 10px;
    }

    .hero-main-part img {
        display: none;
    }

    .hero-mobile-block {
        display: block;
    }

    .hero-mobile-title {
        font-size: 20px;
        margin-top: 48px;
        text-align: center;
        padding: 0 5px;
    }

    .hero-description-span {
        display: none;
    }

    .hero-button.mt-60 {
        margin-top: 30px;
        display: flex;
        justify-content: center;
    }

    .possibility {
        flex-wrap: wrap;
    }

    .possibility-video {
        width: 100%;
    }

    .possibilities-slider {
        width: 100%;
    }

    .wrapper-vertical {
        max-width: 250px;
        margin: 0 auto;
    }

}


@media (max-width: 510px) {

    body {
        font-size: 14px;
    }

    h1,
    .h1 {
        font-size: 22px;
    }

    h2,
    .h2 {
        font-size: 20px;
        text-align: center;
    }

    .button {
        font-size: 14px;
    }

    .container {
        padding: 0 10px !important;
    }

    .tabs {
        padding: 10px;
    }

    .tab {
        font-size: 10px;
    }

    .header-inner-left {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    header .container {
        padding: 0 10px;
    }

    #features {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .features-blocks {
        padding: 0;
    }

    .feature-item {
        height: auto;
    }

    .feature-title {
        font-size: 18px;
    }

    .feature-description {
        font-size: 10px;
    }

    .feature-img {
        width: 88px;
    }

    .features-blocks .left-block {
        margin-top: 0;
    }

    .features-blocks .left-block .h1,
    .features-text.p1,
    .features-buttons {
        display: none;
    }

    .features-button-mobile {
        display: flex;
        justify-content: center;
    }

    #industries {
        padding: 30px 0;
    }

    .industries-content {
        margin-top: 15px;
    }

    .industries {
        margin-top: 30px;
        gap: 16px 10px;
    }

    .industry {
        height: 56px;
        width: 93px;
                padding-top: 5px;
    }

    .industry-description {
        display: none;
    }

    .industry-title {
        font-size: 9px;
    }

    #possibilities {
        padding-top: 30px;
    }

    .possibilities-tabs {
        margin-top: 30px;
        overflow-x: auto;
justify-content: flex-start;
    }

    .possibilities {
        margin-top: 30px;
    }

    .possibility {
        flex-wrap: wrap;
    }

    .possibilities-button {
        display: flex;
        justify-content: center;
    }

    .wrapper-vertical {
        max-width: 180px;
        margin: 0 auto;
        height: 328px;
    }

    .possibilities-slide {
        height: 50px;
    }

    #cases {
        padding-top: 30px;
    }

    .cases-tabs {
        margin-top: 30px;
    }

    .cases {
        margin-top: 30px;
    }

    .case-title {
        font-size: 18px;
    }

    .case-description {
        font-size: 12px;
    }

    .cases-button {
        margin-top: 30px;
    }

    .case-tag {
        font-size: 9px;
    }


    #counters {
        padding: 30px 0;
    }

    .counters {
        grid-template-columns: repeat(2, 1fr);
        max-width: 400px;
        margin: 30px auto 0;
        gap: 10px;
    }

    .counter-item {
        padding: 10px;
        height: auto;
        font-size: 14px;

    }

    .counter-item-large {
        display: none;
    }

    .counter-img {
              background-size: 64px auto;
        min-height: 83px;
    }

    .counter-title-span1 {
        font-size: 14px;
    }

    .counter-title-span2 {
        font-size: 18px;
    }

    .counter-title-span3 {
        font-size: 14px;
    }

    .counter-description {
        font-size: 10px;
        margin-top: 5px;
    }

    #logos {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .logos {
    display: flex;
    flex-wrap: wrap;
        gap: 10px;
    justify-content: center; /* или другое значение по вашему выбору */
}

/* Дополнительно можно задать ширину для элементов логотипов */
.logos > * {
    flex: 0 0 calc(33% - 45px); /* 4 элемента в строке с учетом gap */
    max-width: calc(33% - 45px); /* для браузеров, которые не поддерживают flex-gap */
    box-sizing: border-box;
}

    .logo-item img {

    }

    #expertise {
        margin-top: 30px;
    }

    .expertise-items {
        margin-top: 30px;
        gap: 5px;
    }

    .expertise-item {
        padding: 00px;
    }

    .expertise-title {
        font-size: 11px;
    }

    .expertise-title {
    min-height: 0px;
}

.expertise-title {

    padding: 20px 10px;}
}

@media (max-width: 340px) {

    h2,
    .h2 {
        font-size: 25px;
    }
}