.portfolio-container{
    width: 100%; height: auto; min-height: 500px;
    margin: 0 auto;
    padding: 20px; box-sizing: border-box;
    color: #dcedf5; background-color: #1a1d1f;
}

@media screen and (max-width: 630px) {
    .portfolio-container{
        margin-top: 50px ;

    }
}

.portfolio-container .inner-container{
    width: 100%; height: auto;
    margin: 0 ;
    padding: 10px 20px; box-sizing: border-box;
    border-radius: 15px;
    color: #f5f9fa; background-color: #303538;
}

.portfolio-container .inner-container .portfolio{
    width: 100%; height: auto; 
    margin: 20px 0 ;
    padding: 0 ; box-sizing: border-box;
    border-radius: 15px;
    color: #f5f9fa; background-color: #303538;
}

.portfolio-container .inner-container .portfolio:first-child{
    margin-top: 10px;
}

.portfolio-container .inner-container .portfolio:last-child{
    margin-bottom: 10px;
}

@media screen and (max-width: 500px) {
    .portfolio-container{
        padding: 1% 2%; 
    }

    .portfolio-container .inner-container{
        margin:  10px 0;
        padding: 1px 2%;
    }

    .portfolio-container .inner-container .portfolio{
        margin: 10px 0 ;

    }    
}

.portfolio-container .inner-container .portfolio .inner-container{
    width: 100%; height: auto; 
    margin: 0 ;
    padding: 20px ; box-sizing: border-box;
    border-radius: 15px;
    color: #f5f9fa; background-color: #1a1d1f;
}

.portfolio-container .inner-container .portfolio .col1{
    width: 38%; height: auto; 
    margin: 0 1%;
    display: inline-block; vertical-align: top;
    color: #f5f9fa; background-color: #1a1d1f;
}

.portfolio-container .inner-container .portfolio .col2{
    width: 57.5%; height: auto; 
    margin: 0 1%;
    display: inline-block; vertical-align: top;
}

@media screen and (max-width: 820px) {    
    .portfolio-container .inner-container .portfolio .col1,
    .portfolio-container .inner-container .portfolio .col2{
        width: 100%; height: auto; 
        margin: 0 ;
        display: block; 
    }
}

.portfolio-container .inner-container .portfolio .col1 .title{
    width: 100%; height: auto;
    margin: 10px 0;
    padding: 0 10px; box-sizing: border-box;
    font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: 700;
}

.portfolio-container .inner-container .portfolio .col1 .description{
    width: 100%; height: auto;
    margin: 10px 0;
    padding: 0 10px; box-sizing: border-box;
    font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 0.5px; line-height: 22px;
}


.portfolio-container .inner-container .portfolio .col2 .slider{
    width: 100%; height: auto;
    margin: 0;
}


.portfolio-container .inner-container .portfolio .col2 .slider .slides .slider-image{
    width: calc(100% - 20px); height: auto;
    margin: 10px;
    border-radius: 12px;
}