#company-detail {
    padding: 50px 0;

}
#company-detail .container {
    display: flex;
}
#company-detail .left {
    flex-basis: calc(100% - 297px);
    padding-right: 100px;
}
#company-detail .left .title {
    font-size: 42px;
    font-weight: 800;
    line-height: 50px;
}
#company-detail .left .description {
    margin-top: 30px;
}
#company-detail .left .description > p {
    margin-top: 30px;
    color: var(--color-text-alt);
}
#company-detail .left .description > p:first-child {
    margin-top: 0;
}
#company-detail .right {
    flex: 297px;
}
#company-detail .right .label {
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
}
#company-detail .right .socials,
#company-detail .right .contacts {
    margin-top: 30px;
}
#company-detail .right .site a {
    color: var(--color-text-alt);
    text-decoration: unset;
    display: flex;
    align-items: center;
    margin-top: 10px;
}
#company-detail .right .site a .icon {
    font-size: 21px;
    margin-right: 10px;
    color: var(--color-text);
}
#company-detail .right .socials .socials-link-box {
    display: flex;
    align-items: center;
    margin-top: 10px;
}
#company-detail .right .socials .social-link {
    color: var(--color-text);
    margin-left: 10px;
    font-size: 24px;
    text-decoration: unset;
}
#company-detail .right .socials .social-link:first-child {
    margin-left: 0;
}
#company-detail .right .contacts-box {
    display: flex;
    flex-direction: column;
}
#company-detail .right .contacts-box .item {
    margin-top: 10px;
    text-decoration: unset;
    color: var(--color-text-alt);
    display: flex;
    align-items: center;
}
#company-detail .right .contacts-box .item .icon {
    font-size: 20px;
    color: var(--color-text-alt);
    margin-right: 10px;
}
#company-detail .right .top-list {
    margin-top: 50px;
}
#company-detail .right .top-list .list {
    padding: 8px 0 0;
    margin: 0;
    list-style-type: none;
}
#company-detail .right .top-list .list .item {
    padding: 15px;
    border-radius: 15px;
    border: 1px solid var(--color-border-secondary);
    background-color: var(--color-bg-alt);
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    counter-increment: rate;
}
#company-detail .right .top-list .list .item .name {
    display: flex;
    align-items: center;
}
#company-detail .right .top-list .list .item .name::before {
    content: counter(rate);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding: 7px 8px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--color-border-secondary);
    background-color: var(--color-bg-third);
    color: var(--color-text-third);
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    line-height: 22px;
    margin-right: 10px;
}
#company-detail .right .top-list .list .item:nth-child(-n+3) .name::before {
    font-family: 'heroicons-solid' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\ea13";
    background-color: var(--color-bg-fourth);
    color: var(--color-text-secondary);
}
#company-detail .right .top-list .list .item .progress-bar {
    flex-basis: 80px;
}

@media (max-width: calc(991px + 30px)) {

    #company-detail {
        padding: 35px 0;
    }
    #company-detail .left .title {
        font-size: 32px;
        line-height: 40px;
    }
    #company-detail .left {
        flex-basis: calc(100% - 250px);
        padding-right: 50px;
    }
    #company-detail .right {
        flex: 250px;
    }
    #company-detail .right .label {
        font-size: 22px;
        line-height: 26px;
    }
    #company-detail .right .top-list .list .item .name {
        font-size: 14px;
    }
}

@media (max-width: 768px) {

    #company-detail {
        padding: 20px 0;
    }
    #company-detail .container {
        flex-direction: column;
        max-width: 576px;
    }
    #company-detail .left .description {
        margin-top: 10px;
    }
    #company-detail .left .description > p {
        margin-top: 10px;
    }
    #company-detail .right {
        margin-top: 40px;
        flex-basis: auto;
    }
    #company-detail .right .label {
        font-size: 19px;
        line-height: 24px;
    }
    #company-detail .right .socials,
    #company-detail .right .contacts {
        margin-top: 20px;
    }
    #company-detail .right .site a,
    #company-detail .right .socials .socials-link-box {
        margin-top: 8px;
    }
    #company-detail .right .socials .social-link {
        margin-left: 8px;
    }
    #company-detail .right .contacts-box .item {
        margin-top: 8px;
    }
    #company-detail .right .top-list {
        margin-top: 30px;
    }
    #company-detail .right .top-list .list .item .progress-bar {
        flex-basis: 60%;
    }
}