/* ============================================================
   БЛОК INTEGRATION (інтеграції з інструментами)
   Підключення:
   <link rel="stylesheet" href="{{ asset('public/assets\css\frontend\New_website\integration.css') }}">

   Брейкпоінти:
   - ПК (за замовчуванням)          > 1440px
   - ноутбук / планшет альбомний    <= 1440px
   - планшет портретний             <= 1024px
   - телефон                        <= 768px
   ============================================================ */

.body-integration {
    display: flex;
    width: 100%;
    max-width: 1920px;
    height: 830px;
    background-color: #ffffff;
    background-image: url('/assets/image/website/body/div2/back.png');
    background-size: cover;
    background-position: center;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.integration-top {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1312px;
    height: 38px;
    margin-bottom: 50px;
}

.color-blues {
    font-family: 'Montserrat', sans-serif;
    color: rgba(29, 147, 255, 1);
    font-weight: 900;
    font-size: 32px;
    line-height: 38px;
}

.integration-center {
    display: flex;
    width: 100%;
    max-width: 1312px;
    height: 518px;
    align-content: center;
    justify-content: space-between;
}

.main-integration-left,
.main-integration-right {
    display: flex;
    width: 200px;
    flex-direction: column;
    justify-content: space-evenly;
}

.main-integration-left img,
.main-integration-right img {
    max-width: 100%;
    height: auto;
}

.main-integration-center {
    position: relative;
    width: 618px;
    height: 518px;
    background-image: url('/assets/image/website/body/div2/36748616061539 5.png');
    background-position: -141.84px -182.73px;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-image {
    width: 150px;
    z-index: 2;
}

.size-1, .size-2, .size-3, .size-4 { position: absolute; }

.size-1 { top: 20px;    left: 20px;  width: 180px; height: 180px; }
.size-2 { top: 20px;    right: 20px; width: 180px; height: 180px; }
.size-3 { bottom: 20px; left: 20px;  width: 200px; height: 200px; }
.size-4 { bottom: 20px; right: 20px; width: 280px; height: 280px; }

.position-img-1 {
    margin-top: 61px;
    position: absolute;
    margin-left: -6px;
    width: 183px;
    height: 391px;
}

.position-img-2 {
    margin-top: 61px;
    position: absolute;
    margin-left: -176px;
    width: 221px;
    height: 391px;
}

.integration-bot {
    display: flex;
    width: 662px;
    height: 48px;
    justify-content: space-between;
    margin-top: 30px;
}

.integration-bot-text {
    width: 324px;
    height: 48px;
}

/* мобільна стрічка логотипів — на ПК прихована */
.integration-logos-marquee { display: none; }

@keyframes integration-marquee-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================================================
   НОУТБУК / ПЛАНШЕТ АЛЬБОМНИЙ  (<= 1440px)
   Колонки лишаються, розміри зменшуються; декоративні стрілки
   з фіксованими відступами приховуються, щоб не «роз'їжджались»
   ============================================================ */
@media (max-width: 1440px) {

    .body-integration {
        height: auto;
        padding: 56px 32px;
        box-sizing: border-box;
    }

    .integration-top {
        height: auto;
        margin-bottom: 40px;
        text-align: center;
    }

    .integration-top h3 { margin: 0; }

    .color-blue, .color-blues { font-size: 28px; line-height: 34px; }

    .integration-center {
        height: auto;
        align-items: center;
        gap: 24px;
    }

    .main-integration-left,
    .main-integration-right {
        width: 180px;
        gap: 20px;
        justify-content: center;
    }

    /* стрілки прив'язані до фіксованої сітки 1312px — ховаємо */
    .position-img-1,
    .position-img-2 { display: none; }

    .main-integration-center {
        width: 520px;
        height: 440px;
        background-size: 720px auto;
        background-position: center;
        flex-shrink: 0;
    }

    .center-image { width: 130px; }

    .size-1 { top: 16px;    left: 16px;  width: 140px; height: 140px; }
    .size-2 { top: 16px;    right: 16px; width: 140px; height: 140px; }
    .size-3 { bottom: 16px; left: 16px;  width: 160px; height: 160px; }
    .size-4 { bottom: 16px; right: 16px; width: 220px; height: 220px; }
}

/* ============================================================
   ПЛАНШЕТ ПОРТРЕТНИЙ  (<= 1024px)
   Бічні колонки ховаються, логотипи їдуть безкінечною стрічкою
   справа наліво, сфера по центру
   ============================================================ */
@media (max-width: 1024px) {

    .body-integration { padding: 40px 0; }

    .integration-top { padding: 0 24px; box-sizing: border-box; }

    .color-blue, .color-blues { font-size: 24px; line-height: 30px; }

    .integration-center {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    /* бічні колонки логотипів ховаємо —
       логотипи переїжджають у стрічку нижче */
    .main-integration-left,
    .main-integration-right { display: none; }

    /* сфера з іконками */
    .main-integration-center {
        width: 100%;
        max-width: 480px;
        height: 380px;
        background-size: 620px auto;
    }

    .center-image { width: 110px; }

    .size-1 { top: 12px;    left: 32px;  width: 120px; height: 120px; }
    .size-2 { top: 12px;    right: 32px; width: 120px; height: 120px; }
    .size-3 { bottom: 12px; left: 32px;  width: 135px; height: 135px; }
    .size-4 { bottom: 4px;  right: 20px; width: 175px; height: 175px; }

    /* ---------- безкінечна стрічка логотипів справа наліво ---------- */
    .integration-logos-marquee {
        display: block;
        width: 100%;
        overflow: hidden;
        margin-top: 24px;
    }

    .integration-logos-track {
        display: flex;
        align-items: center;
        width: max-content;
        animation: integration-marquee-rtl 18s linear infinite;
    }

    .integration-logos-group {
        display: flex;
        align-items: center;
        gap: 20px;
        padding-right: 20px;
        flex-shrink: 0;
    }

    .integration-logos-group .btn-logo-border-blue,
    .integration-logos-group .btn-logo-blue {
        flex-shrink: 0;
    }

    .integration-logos-group img {
        max-height: 44px;
        width: auto;
    }

    .integration-bot {
        width: 100%;
        height: auto;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-top: 28px;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .integration-bot-text {
        width: 100%;
        max-width: 420px;
        height: auto;
        text-align: center;
    }
}
/* ============================================================
   ТЕЛЕФОН  (<= 768px)
   ============================================================ */
@media (max-width: 768px) {

    .body-integration { padding: 32px 0; }

    .integration-top { padding: 0 16px; margin-bottom: 20px; }

    .color-blue, .color-blues { font-size: 20px; line-height: 26px; }

    /* сфера компактніша */
    .main-integration-center {
        max-width: 360px;
        height: 280px;
        background-size: 480px auto;
    }

    .center-image { width: 80px; }

    .size-1 { top: 10px;    left: 24px;  width: 90px;  height: 90px;  }
    .size-2 { top: 10px;    right: 24px; width: 90px;  height: 90px;  }
    .size-3 { bottom: 10px; left: 24px;  width: 100px; height: 100px; }
    .size-4 { bottom: 0;    right: 12px; width: 130px; height: 130px; }

    /* стрічка логотипів трохи щільніша і швидша */
    .integration-logos-marquee { margin-top: 16px; }
    .integration-logos-track { animation-duration: 14s; }
    .integration-logos-group { gap: 16px; padding-right: 16px; }

    .integration-logos-group img { max-height: 40px; }

    .integration-bot { margin-top: 24px; padding: 0 16px; }
    .integration-bot-text { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .integration-logos-track { animation: none; }
}