.portfolio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 80px;
}
.portfolio .project a
{
        width: 100%;
        height: 100%;
        position: relative;
        /*border: 1px solid red;*/
        display: block;
}
.portfolio .project {
   
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    height: 50vh;
    overflow: hidden;
   
}


.portfolio .project img {
    object-fit: cover;
    width: 100%;
    position: absolute;
    z-index: 2;
    transition: transform 15s linear;
    opacity: 80%;
    top: 0;
    left: 0;
}
.portfolio .project img:hover{
    opacity: 100%;
}
.portfolio .project:hover img 
{
    /*bottom: 0;*/
  transform: translateY(calc(-100% + 50vh));

}


.info
{
    width: 100%;
    /*height: 20vh;*/
    /*border: 1px solid red;*/
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 0;
    /*transform: translate(-50%,-50%);*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-block: 10px;
    transition: 0.7s;
}
.info h4, .info p 
{
    color: #fff;
}
.portfolio .project:hover .info
{
    /*display: none;*/
    transform: translateY(100%);
}



/*.scroll-icon
{
    width: 25px;
    height: 40px;
    border: 3px solid red;
    border-radius: 15px;
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    justify-content: center;
    animation: animate-top-bottom 3s linear infinite;
}*/

/*@keyframes animate-top-bottom{
    0%{
        transform: translateY(10px);
    }
    100%{
         transform: translateY(-10px);
    }
}*/



/*.scroll-icon .line  
{
    width: 3px;
    height: 8px;
    background: red;
    margin-top: 10px;
    border-radius: 3px;
}
.scroll-icon:after 
{
    position: absolute;
    content: '';
    border-radius: 3px;
    top: -20px;
    left: 50%;

    width: 7px;
    height: 7px;
    border-left: 3px solid red;
    border-top: 3px solid red;
    transform: rotate(45deg) translateX(-50%);
}

.scroll-icon:before
{
    position: absolute;
    content: '';
    border-radius: 3px;
    bottom: -25px;
    left: 50%;

    width: 7px;
    height: 7px;
    border-right: 3px solid red;
    border-bottom: 3px solid red;
    transform: rotate(45deg) translateX(-50%);
}*/
.webdesign {
    text-align: center;
    margin-bottom: 30px;
}



/*.portfolio .project img {
    transition: transform 15s linear;
    display: block;
}

.portfolio .project img:hover {
    transform: translateY(calc(-100% + 50vh));

}*/