.industries {
    margin: 44px 0;
}

.industries-item {
    position: relative;
    padding: 16px;
    border-top: 1px solid transparent;
}

.industries-item.active {
    border-top-color: var(--uasoft-color-border);
    background: #F8FBFF;
    border-radius: 0 0 22px 22px;
}

.industries-list {
    margin-top: 44px;
}

.industries-item-title {
    margin-bottom: 16px;
    line-height: 1.3333;
    padding-right: 60px;
    text-wrap: balance;
}

.industries-item-name {
    font-size: var(--uasoft-font-h5);
    font-weight: 500;
}

.industries-item-text {
    color: var(--uasoft-text);
    line-height: 1.5;
}

.industries-toggle {
    position: absolute;
    top: 12px;
    right: 16px;
    border: 1px solid var(--uasoft-color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffffff;
}

.industries-toggle::after {
    content: url("data:image/svg+xml,%0A%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.91667 0.625C7.91667 0.279822 7.63684 0 7.29167 0C6.94649 0 6.66667 0.279822 6.66667 0.625L6.66667 6.66667H0.625C0.279822 6.66667 0 6.94649 0 7.29167C0 7.63684 0.279822 7.91667 0.625 7.91667H6.66667V13.9583C6.66667 14.3035 6.94649 14.5833 7.29167 14.5833C7.63684 14.5833 7.91667 14.3035 7.91667 13.9583V7.91667H13.9583C14.3035 7.91667 14.5833 7.63684 14.5833 7.29167C14.5833 6.94649 14.3035 6.66667 13.9583 6.66667H7.91667L7.91667 0.625Z' fill='%231F3F5D'/%3E%3C/svg%3E");
    position: absolute;
    left: 50%;
    top: calc(50% + 2px);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.industries-item.active .industries-toggle::after {
    top: calc(50% - 2px);
    content: url("data:image/svg+xml,%3Csvg width='15' height='2' viewBox='0 0 15 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.625 0C0.279822 0 0 0.279822 0 0.625C0 0.970178 0.279822 1.25 0.625 1.25H13.9583C14.3035 1.25 14.5833 0.970178 14.5833 0.625C14.5833 0.279822 14.3035 0 13.9583 0H0.625Z' fill='%231F3F5D'/%3E%3C/svg%3E");
}

.industries-item-btn,
.industries-item-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}

.industries-item-btn > div,
.industries-item-content-wrap {
    overflow: hidden;
}

.industries-item-btn a {
    margin-top: 16px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.industries-item.active .industries-item-btn,
.industries-item.active .industries-item-content {
    grid-template-rows: 1fr;
}

.industries-item-image-wrap {
    position: relative;
    margin: 0;
    padding-bottom: 101.84%;
    border-radius: 22px;
    overflow: hidden;
}

.industries-item-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.industries-item.active .industries-item-image-wrap {
    margin: 16px 0;
}

.industries-item.active .industries-item-text {
    color: inherit;
}

.industries-item-tags ul {
    font-size: var(--uasoft-font-large);
    font-weight: 500;
}

.industries-item-tags ul li {
    position: relative;
    margin-top: 16px;
    display: flex;
    align-items: center;
    padding-left: 72px;
    min-height: 56px;
}

.industries-item-tags ul li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0253 15.6834C11.8669 15.6834 11.7086 15.6251 11.5836 15.5001C11.3419 15.2584 11.3419 14.8584 11.5836 14.6168L16.2003 10.0001L11.5836 5.38343C11.3419 5.14176 11.3419 4.74176 11.5836 4.5001C11.8253 4.25843 12.2253 4.25843 12.4669 4.5001L17.5253 9.55843C17.7669 9.8001 17.7669 10.2001 17.5253 10.4418L12.4669 15.5001C12.3419 15.6251 12.1836 15.6834 12.0253 15.6834Z' fill='%231F3F5D'/%3E%3Cpath d='M16.942 10.625H2.91699C2.57533 10.625 2.29199 10.3417 2.29199 10C2.29199 9.65833 2.57533 9.375 2.91699 9.375H16.942C17.2837 9.375 17.567 9.65833 17.567 10C17.567 10.3417 17.2837 10.625 16.942 10.625Z' fill='%23292D32'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width: 768px) {
    .industries-item {
        padding: 24px;
    }

    .industries-item-btn a {
        margin-top: 40px;
    }

    .industries-item-title {
        margin-bottom: 36px;
    }

    .industries-item-content-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 36px;
        margin-top: 20px;
    }

    .industries-item-text {
        max-width: 462px;
        line-height: 1.5;
    }

    .industries-item-image {
        width: 34.6%;
    }

    .industries-item-image-wrap {
        margin: 16px 0 0 !important;
        padding-bottom: 140.1%;
    }

    .industries-item-tags {
        width: calc(100% - 34.6% - 36px);
    }
}

@media screen and (min-width: 1280px) {
    .industries {
        margin: 80px 0 0;
    }

    .industries-item {
        padding-right: 88px;
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .industries-item-wrapper {
        display: flex;
        justify-content: space-between;
        gap: 36px;
    }

    .industries-item-wrapper > * {
        flex: 1;
    }

    .industries-item-text-wrap {
        width: 220px;
    }

    .industries-item-title {
        padding-right: 0;
        flex: 0 0 60%;
        transition: all 0.4s ease;
    }

    .industries-item.active .industries-item-title {
        flex: 1;
        text-wrap: inherit;
    }

    .industries-item-content-wrap {
        margin-top: 0;
        flex-wrap: nowrap;
        opacity: 0;
        transition: opacity 0.8s ease;
    }

    .industries-item.active .industries-item-content-wrap {
        opacity: 1;
    }

    .industries-item.active .industries-item-title {
        width: auto;
    }

    .industries-item-image-wrap {
        margin: 0 !important;
    }

    .industries-item-text {
        display: flex;
        justify-content: end;
    }

    .industries-item.active .industries-item-text {
        flex: 0 0 fit-content;
    }

    .industries-item-image {
        width: 232px;
        transition: all 0.4s ease;
        transform: scale(0);
    }

    .industries-item.active .industries-item-image {
        transform: scale(1);
    }

    .industries-item-tags ul li {
        white-space: nowrap;
    }

    .industries-item-tags ul li:nth-of-type(1) {
        margin-top: 0;
    }

    .industries-toggle {
        top: 44px;
        cursor: pointer;
    }
}