.portfolio-contioner .portfolio-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*###################### style left-section #####################*/
.portfolio-contioner .portfolio-wrapper .left-section .list {
    display: flex;
    gap: 2rem;
}
/*###################### style right-section #####################*/
.portfolio-contioner .portfolio-wrapper .right-section {
    width: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    transform: translate(-75dvh, 29dvh);
}
.portfolio-contioner .portfolio-wrapper .right-section .portfolio-card {
    border: 1px solid #abb2bf;
}
.portfolio-wrapper .right-section .portfolio-card .img {
    width: 220px;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.portfolio-wrapper .right-section .portfolio-card .technologies {
    border-block: 1px solid #abb2bf;
    color: #abb2bf;
    padding: 0.5rem;
}

.portfolio-wrapper .right-section .portfolio-card .info-box {
    padding: 1rem;
}

.portfolio-wrapper .right-section .portfolio-card .info-box .name {
    color: #abb2bf;
    padding-left: 5px;
}

.portfolio-wrapper .right-section .portfolio-card .info-box .text {
    margin: 1rem 0;
    color: #abb2bf;
}

.portfolio-wrapper .right-section .portfolio-card .actions {
    display: flex;
    gap: 1rem;
}

.portfolio-wrapper .right-section .portfolio-card .actions-live {
    border: 1px solid #abb2bf;
    transition: all 0.3s ease;
}
.portfolio-wrapper .right-section .portfolio-card .actions-live:hover {
    background: rgb(134, 94, 172);
    color: rgb(235, 224, 224);
    transform: translateY(-5px);
}
.portfolio-wrapper .right-section .portfolio-card .actions-btn {
    border: 1px solid #abb2bf;
    transition: all 0.3s ease;
}
.portfolio-wrapper .right-section .portfolio-card .actions-btn:hover {
    background: rgb(134, 94, 172);
    color: white;
    transform: translateY(-5px);
}