.technologies {
    padding: 42px 0;
}

.technologies-title {
    line-height: 1.29;
}

.technologies-list {
    margin-top: 17px;
}

.technologies-tab {
    position: relative;
    color: var(--uasoft-text);
    font-weight: 500;
    font-size: var(--uasoft-font-large);
    line-height: 1.5;
    padding: 16px 36px 16px 24px;
}

.technologies-tab::after {
    content: url("data:image/svg+xml,%3Csvg width='25' height='3' viewBox='0 0 25 3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.0625 0C0.475697 0 0 0.475697 0 1.0625C0 1.6493 0.475697 2.125 1.0625 2.125H23.7292C24.316 2.125 24.7917 1.6493 24.7917 1.0625C24.7917 0.475697 24.316 0 23.7292 0H1.0625Z' fill='%231F3F5D'/%3E%3C/svg%3E");
    position: absolute;
    top: 11px;
    right: 5px;
    width: 25px;
    height: 3px;
    display: block;
    opacity: 0;
    transition: opacity 0.3s;
}

.technologies-tab.active {
    color: var(--uasoft-accent);
}

.technologies-tab.active::after {
    opacity: 1;
}

.technology-item-count {
    color: var(--uasoft-text);
}

.technology-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 16px 56px 16px 16px;
    border-bottom: 1px solid var(--uasoft-text);
}

.technologies-item.active {
    background: #E7F1FF;
}

.technologies-tabs-content {
    padding-top: 13px;
}

.technologies-tab-content:not(.active) {
    display: none;
}

.technologies-tab-content .technology-item.active {
    background: var(--uasoft-blue-gay);
}

.technology-item-toggle {
    position: absolute;
    top: 12px;
    right: 10px;
    width: 45px;
    height: 45px;
}

.technology-item-toggle::after {
    content: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.4583 1.0625C13.4583 0.475697 12.9826 0 12.3958 0C11.809 0 11.3333 0.475698 11.3333 1.0625L11.3333 11.3333H1.0625C0.475697 11.3333 0 11.809 0 12.3958C0 12.9826 0.475697 13.4583 1.0625 13.4583H11.3333V23.7292C11.3333 24.316 11.809 24.7917 12.3958 24.7917C12.9826 24.7917 13.4583 24.316 13.4583 23.7292V13.4583H23.7292C24.316 13.4583 24.7917 12.9826 24.7917 12.3958C24.7917 11.809 24.316 11.3333 23.7292 11.3333H13.4583L13.4583 1.0625Z' fill='%231F3F5D'/%3E%3C/svg%3E%0A");
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
}

.technology-item.active .technology-item-toggle::after {
    content: url("data:image/svg+xml,%3Csvg width='25' height='3' viewBox='0 0 25 3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.0625 0C0.475697 0 0 0.475697 0 1.0625C0 1.6493 0.475697 2.125 1.0625 2.125H23.7292C24.316 2.125 24.7917 1.6493 24.7917 1.0625C24.7917 0.475697 24.316 0 23.7292 0H1.0625Z' fill='%231F3F5D'/%3E%3C/svg%3E");
}

.technology-item-name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.technology-item-icon-wrapper {
    width: 50px;
}

.technology-item-description {
    padding-top: 18px;
    font-weight: 500;
}

.technology-item-description-large {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease, padding-top 0.4s ease;
    font-weight: 400;
}

.technology-item-description-large > div {
    overflow: hidden;
}

.technology-item.active .technology-item-description-large {
    grid-template-rows: 1fr;
    padding-top: 44px;
}

.technology-item-cases-wrap {
    width: calc(100% + 56px);
    margin-right: -56px;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}

.technology-item-cases-content {
    overflow: hidden;
}

.technology-item.active .technology-item-cases-wrap {
    grid-template-rows: 1fr;
}

.technology-item-cases-title {
    font-weight: 600;
    margin: 14px 0;
}

.technology-item-cases {
    --technology-item-cases-gap: 6px;
    display: flex;
    gap: var(--technology-item-cases-gap);
    width: 100%;
}

.technology-item-cases a {
    display: block;
    width: calc((100% - (var(--technology-item-cases-gap) * 3)) / 3) !important;
    max-width: 100px;
    position: relative;
}

.technology-item-cases a picture {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 120%;
}

.technology-item-cases a picture img {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media screen and (min-width: 768px) {
    .technologies {
        padding-top: 84px;
    }

    .technologies-list {
        margin-top: 40px;
    }

    .technologies-tabs {
        display: flex;
        border-bottom: 1px solid var(--uasoft-color-border);
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .technologies-tabs::-webkit-scrollbar {
        display: none;
    }

    .technologies-tabs-content {
        padding-top: 44px;
    }

    .technologies-tab {
        padding: 16px 24px;
        cursor: pointer;
        white-space: nowrap;
    }

    .technologies-tab::after {
        display: none;
    }

    .technologies-tab::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 2px;
        background: var(--uasoft-accent);
        opacity: 0;
        transition: opacity 0.3s;
    }

    .technologies-tab.active::before {
       opacity: 1;
    }

    .technology-item {
        gap: 5px 50px;
        padding: 36px 56px 36px 24px;
    }

    .technology-item-toggle {
        top: 40px;
    }

    .technology-item-description-short {
        max-width: 445px;
    }
}

@media screen and (min-width: 1280px) {
    .technology-item {
        align-items: start;
        justify-content: space-between;
        padding-right: max(56px, 7.1vw);
        column-gap: 44px;
    }

    .technology-item > * {
        flex: 1;
    }

    .technology-item-count {
        flex: 0 0 60px;
    }

    .technology-item-description {
        width: auto;
        padding-top: 0;
    }

    .technology-item-cases-wrap {
        width: 30.48%;
        margin-right: 0;
        align-self: stretch;
        align-content: end;
    }

    .technology-item-cases-content {
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

    .technology-item-cases-title {
        margin-top: 0;
    }

    .technology-item-cases {
        --technology-item-cases-gap: 12px;
    }

    .technology-item-toggle {
        top: 35px;
        cursor: pointer;
    }
}